Lightweight Custom Form Validation with jQuery: A Step-by-Step Guide

Why Custom jQuery Validation?

While plugins like jQuery Validation are powerful, they often come with extra weight and features you don't need. For most projects, a custom, lightweight script is more efficient. Building your own validation logic gives you full control over the user experience and keeps your site fast.

Setting Up Your HTML Form

First, we need a standard HTML form. We will add a simple class to our inputs and a container for error messages. This structure makes it easy for jQuery to find and validate each field.

<form id="contactForm" novalidate>
  <div class="field-group">
    <label>Name:</label>
    <input type="text" class="required" id="name">
    <span class="error-msg">Name is required.</span>
  </div>
  <div class="field-group">
    <label>Email:</label>
    <input type="email" class="required email" id="email">
    <span class="error-msg">Please enter a valid email.</span>
  </div>
  <button type="submit">Send Message</button>
</form>

The jQuery Validation Logic

The core strategy is to prevent the form submission, loop through the required fields, and check if they meet our criteria. We use CSS classes to show or hide error messages dynamically.

$(document).ready(function() {
  $('#contactForm').on('submit', function(e) {
    let isValid = true;

    // Reset errors
    $('.error-msg').hide();
    $('.required').removeClass('input-error');

    // Validate Required Fields
    $('.required').each(function() {
      if ($.trim($(this).val()) === '') {
        $(this).addClass('input-error');
        $(this).siblings('.error-msg').show();
        isValid = false;
      }
    });

    // Validate Email Format
    let emailField = $('#email');
    let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (emailField.val() !== '' && !emailPattern.test(emailField.val())) {
      emailField.addClass('input-error');
      emailField.siblings('.error-msg').text('Invalid email format').show();
      isValid = false;
    }

    if (!isValid) {
      e.preventDefault();
    }
  });
});

Adding Real-Time Feedback

Waiting until the user clicks "Submit" can be frustrating. You can enhance this script by validating fields as soon as the user leaves them using the blur event. This provides immediate feedback and a smoother experience.

$('.required').on('blur', function() {
  if ($.trim($(this).val()) === '') {
    $(this).addClass('input-error');
    $(this).siblings('.error-msg').show();
  } else {
    $(this).removeClass('input-error');
    $(this).siblings('.error-msg').hide();
  }
});

Conclusion

Custom jQuery validation is a great way to handle form logic without the bloat of external libraries. By using simple selectors and basic logic, you can create a robust validation system that improves performance and maintains a clean codebase. This approach ensures your users always provide the right data while keeping your site's footprint small.