Forms with JavaScript: Frontend Web Development (Intermediate)

Taking over the submit

When a user presses the submit button, the form fires a submit event. By default, the browser sends the data and loads a new page. To check the data first, or to send it with fetch, listen for submit and call event.preventDefault().

html

<form id="signup" novalidate>
  <label for="mobile">Mobile number</label>
  <input id="mobile" name="mobile" type="tel" inputmode="numeric"
         autocomplete="tel" required aria-describedby="mobile-error">
  <p id="mobile-error" class="error"></p>

  <label for="pin">PIN code</label>
  <input id="pin" name="pin" inputmode="numeric" required aria-describedby="pin-error">
  <p id="pin-error" class="error"></p>

  <button type="submit">Create account</button>
</form>

Each input has a name (for FormData) and points to its own error box

novalidate on the form turns off the browser's own error bubbles, because we will show our own messages. Keep required and type in the HTML anyway: they help screen readers and phone keyboards.

Reading all values with FormData

new FormData(form) collects the value of every field that has a name attribute. Object.fromEntries() turns it into a plain object like { mobile: '9876543210', pin: '560001' }. All values are strings.

javascript

const form = document.querySelector('#signup');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // stop the page reload
  const data = Object.fromEntries(new FormData(form));
  const errors = validateForm(data);
  showErrors(form, errors);
  if (Object.keys(errors).length === 0) {
    sendForm(form, data);
  }
});

The full flow: stop, read, check, show errors, send

Think of it like this: Think of the clerk at a bank counter. Before your form goes to the cashier, the clerk checks every box: is the account number complete, is the date filled in, does the signature match? If something is wrong, the clerk points to that exact box. Your validation code is that clerk.

Your own validation rules

Field	Rule	Check in JavaScript
Mobile (India)	10 digits, starts with 6, 7, 8 or 9	/^[6-9]\d{9}$/.test(mobile)
PIN code	6 digits, does not start with 0	/^[1-9]\d{5}$/.test(pin)
Password	At least 8 characters	password.length >= 8
Confirm password	Same as password	confirm === password

javascript

function validateForm(data) {
  const errors = {};
  if (!/^[6-9]\d{9}$/.test(data.mobile)) {
    errors.mobile = 'Enter a 10-digit mobile number';
  }
  if (!/^[1-9]\d{5}$/.test(data.pin)) {
    errors.pin = 'Enter a 6-digit PIN code';
  }
  if (data.password.length < 8) {
    errors.password = 'Use at least 8 characters';
  }
  if (data.confirm !== data.password) {
    errors.confirm = 'The passwords do not match';
  }
  return errors; // {} means everything is fine
}

A pure function: data in, errors object out. Easy to test.

Showing errors next to the field

Put each message in the box that belongs to its field. aria-describedby on the input links it to that box, so a screen reader reads the error together with the label. aria-invalid="true" tells it the field is wrong. setCustomValidity(message) marks the field invalid for the browser too, and setCustomValidity('') clears it.

javascript

function showErrors(form, errors) {
  for (const input of form.querySelectorAll('input')) {
    const message = errors[input.name] || '';
    const box = document.getElementById(input.getAttribute('aria-describedby'));
    if (box) box.textContent = message;
    input.setCustomValidity(message); // '' means valid
    input.setAttribute('aria-invalid', message ? 'true' : 'false');
  }
}

Each error appears right under its own field

Disabling the button while sending

javascript

async function sendForm(form, data) {
  const button = form.querySelector('button[type=submit]');
  button.disabled = true;           // stop double clicks
  button.textContent = 'Sending...';
  try {
    await fetch('/api/signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  } finally {
    button.disabled = false;        // runs on success AND on error
    button.textContent = 'Create account';
  }
}

finally makes sure the button comes back even if sending fails

Careful: Checking in the browser only helps the user. It is not security: anyone can turn off your JavaScript or send data straight to the server. The server must check every value again.

Tip: On phones, type="tel" or inputmode="numeric" opens the number keypad, and autocomplete="tel" lets the phone fill the number. Small things like this make forms much faster to fill.

Forms with JavaScript

Explanation

Taking over the submit

Reading all values with FormData

Your own validation rules

Showing errors next to the field

Disabling the button while sending

Watch the lesson

In real life: A railway or bus booking form

Practice (0/3 done)

Quick quiz

Read more (free)