Form Validation

Learning objectives#

• Use checkValidity and validationMessage
• Add custom rules with setCustomValidity
• Show errors near the field and focus it
• Remember that the server must validate too

Explanation#

Every input has a validity state built from HTML attributes such as required, type="email" and minlength.

form.checkValidity() returns true if every field is valid. input.validationMessage gives the browser’s message.

input.setCustomValidity('message') marks a field invalid with your own message; setCustomValidity('') clears it.

Client-side validation helps users; it is not security. Always validate again on the server.

Code example: Sign-up form with a password match#

1<style>label{display:block;margin:8px 0} #msg{color:#b91c1c;font-weight:600}</style>
2<form id="signup" novalidate>
3  <label>Email <input id="email" type="email" required></label>
4  <label>Password <input id="pw" type="password" required minlength="8"></label>
5  <label>Confirm <input id="pw2" type="password" required></label>
6  <button>Sign up</button>
7  <p id="msg" role="alert"></p>
8</form>
9

10<script>
11  const form = document.querySelector('#signup');
12  const msg = document.querySelector('#msg');
13

14  form.addEventListener('submit', (e) => {
15    e.preventDefault();
16    const pw = form.querySelector('#pw'), pw2 = form.querySelector('#pw2');
17    pw2.setCustomValidity(pw.value === pw2.value ? '' : 'Passwords do not match');
18

19    if (!form.checkValidity()) {
20      const firstBad = form.querySelector(':invalid');
21      msg.textContent = firstBad.validationMessage;
22      firstBad.focus();
23      return;
24    }
25    msg.style.color = '#15803d';
26    msg.textContent = '✓ All good — ready to send!';
27  });
28</script>

Submitting shows the first problem (for example “Passwords do not match”) and focuses that field; a valid form shows a green success message.

Step-by-step explanation#

1. novalidate turns off the browser’s pop-up bubbles so we can show our own message.
2. The custom rule sets or clears an error on the confirm field.
3. checkValidity checks every rule, built-in and custom.
4. :invalid finds the first bad field so we can show its message and focus it.

Real-world use case#

Common mistakes#

Best practices#

• Use HTML attributes first, JavaScript for extra rules
• Show errors next to the field and announce them (role="alert")
• Focus the first invalid field
• Validate again on the server

Remember this#

Practice exercise#

1const email = form.querySelector('#email');
2email.setCustomValidity(email.value.endsWith('@example.com') ? '' : 'Use your company email');

Mini quiz#

Want more? Practise all JavaScript MCQs · JavaScript interview questions

Related topics#

My notes#

Saved in this browser.