jQuery Form Validation Example

This code checks a registration form before it is sent. It shows an error below each wrong field, and stops the submit when there is an error.

HTML

<form id="register" novalidate>
  <p><input type="text" name="name" placeholder="Name"> <span class="err"></span></p>
  <p><input type="text" name="email" placeholder="Email"> <span class="err"></span></p>
  <p><input type="password" name="password" placeholder="Password"> <span class="err"></span></p>
  <button type="submit">Register</button>
</form>

CSS

.err { color: #c00; font-size: 13px; }
input.invalid { border: 1px solid #c00; }

jQuery code

function validate(name, value) {
  value = value.trim();
  if (name === 'name' && value === '') return 'Name is required';
  if (name === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return 'Enter a valid email';
  if (name === 'password' && value.length < 6) return 'Password needs 6 or more characters';
  return '';
}

$('#register').on('submit', function (e) {
  var ok = true;

  $(this).find('input').each(function () {
    var message = validate(this.name, this.value);
    $(this).toggleClass('invalid', message !== '');
    $(this).next('.err').text(message);
    if (message) ok = false;
  });

  if (!ok) e.preventDefault();
  console.log('form valid: ' + ok);
});

// test 1: empty form
$('#register').trigger('submit');
console.log($('.err').map(function () { return $(this).text(); }).get());

// test 2: correct data
$('[name=name]').val('Anita');
$('[name=email]').val('anita@example.com');
$('[name=password]').val('secret123');
$('#register').trigger('submit');

How it works

• The validate() function returns an error text, or an empty text if the value is fine.
• toggleClass('invalid', message !== '') adds the red border only for wrong fields.
• e.preventDefault() stops the form if any field has an error.
• The email check is a simple pattern. The final check must be done on the server too.

• Previous Code
• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.