Client-Side Form Validation With Plain JavaScript and jQuery

Client-side validation gives instant feedback before a form is ever submitted — HTML5's built-in attributes cover the simplest cases for free, while plain JavaScript and jQuery handle anything more specific, though neither is ever a substitute for validating the same data again on the server.

The simplest cases: HTML5 built-in validation

Modern browsers validate these attributes automatically and block submission with a native error tooltip — no JavaScript needed at all for these common, simple cases.

Custom validation with plain JavaScript

document.getElementById('signup-form').addEventListener('submit', function (event) {
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    let isValid = true;

    if (!email.includes('@')) {
        showError('email', 'Please enter a valid email');
        isValid = false;
    }

    if (password.length < 8) {
        showError('password', 'Password must be at least 8 characters');
        isValid = false;
    }

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

function showError(fieldId, message) {
    const field = document.getElementById(fieldId);
    let errorEl = field.nextElementSibling;
    if (!errorEl || !errorEl.classList.contains('error-message')) {
        errorEl = document.createElement('span');
        errorEl.className = 'error-message';
        field.after(errorEl);
    }
    errorEl.textContent = message;
}

Validating on blur, for feedback before the user even submits

document.getElementById('email').addEventListener('blur', function () {
    if (!this.value.includes('@')) {
        showError('email', 'Please enter a valid email');
    }
});

Validating on blur (when a field loses focus) rather than only on submit gives feedback field-by-field as the user works through the form, generally a better experience than waiting until the whole form is submitted to reveal every problem at once.

The same validation with jQuery, for comparison

$('#signup-form').submit(function (event) {
    let isValid = true;

    if (!$('#email').val().includes('@')) {
        $('#email').after('Please enter a valid email');
        isValid = false;
    }

    if ($('#password').val().length < 8) {
        $('#password').after('Password must be at least 8 characters');
        isValid = false;
    }

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

Using the jQuery Validation plugin for a more complete solution

$('#signup-form').validate({
    rules: {
        email: { required: true, email: true },
        password: { required: true, minlength: 8 },
    },
    messages: {
        email: 'Please enter a valid email',
        password: 'Password must be at least 8 characters',
    }
});

A dedicated validation plugin like this handles a considerable amount of boilerplate — error message placement, styling hooks, re-validation as the user corrects a field — that hand-rolled validation logic would otherwise need to implement manually for a genuinely polished result.

Why client-side validation is a UX layer, never a security boundary

Every client-side check shown here can be trivially bypassed by disabling JavaScript, using browser dev tools, or sending a request directly with a tool like Postman — the exact same validation rules need to be enforced again on the server (following the Laravel validation approach covered elsewhere on this site) for the data to actually be trustworthy, regardless of how thorough the client-side checks are.