jQuery Validate Form Before Submit

Form validation is a crucial aspect of web development that ensures data integrity and improves user experience.

In this comprehensive tutorial, we’ll explore how to validate forms before submission using jQuery, covering everything from basic validation to advanced techniques.

Table of Contents

Validate Forms Before Submit

Form validation serves multiple purposes:

Data Quality: Ensures users provide correct and complete information
Security: Prevents malicious data from reaching your server
User Experience: Provides immediate feedback to users
Server Resources: Reduces unnecessary server requests

Basic Form Validation with jQuery

Let’s start with a simple example of validating a contact form before submission:

<form id="contactForm">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <span class="error" id="nameError"></span>
    </div>

    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <span class="error" id="emailError"></span>
    </div>

    <div>
        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone" required>
        <span class="error" id="phoneError"></span>
    </div>

    <button type="submit">Submit</button>
</form>

$(document).ready(function() {
    $('#contactForm').on('submit', function(e) {
        e.preventDefault(); // Prevent default form submission

        let isValid = true;

        // Clear previous errors
        $('.error').text('');

        // Validate name
        const name = $('#name').val().trim();
        if (name === '') {
            $('#nameError').text('Name is required');
            isValid = false;
        } else if (name.length < 2) {
            $('#nameError').text('Name must be at least 2 characters');
            isValid = false;
        }

        // Validate email
        const email = $('#email').val().trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email === '') {
            $('#emailError').text('Email is required');
            isValid = false;
        } else if (!emailRegex.test(email)) {
            $('#emailError').text('Please enter a valid email address');
            isValid = false;
        }

        // Validate phone
        const phone = $('#phone').val().trim();
        const phoneRegex = /^\(\d{3}\)\s\d{3}-\d{4}$/;
        if (phone === '') {
            $('#phoneError').text('Phone number is required');
            isValid = false;
        } else if (!phoneRegex.test(phone)) {
            $('#phoneError').text('Please enter phone in format (123) 456-7890');
            isValid = false;
        }

        // Submit form if valid
        if (isValid) {
            alert('Form is valid! Submitting...');
            // this.submit(); // Uncomment to actually submit
        }
    });
});

I executed the above example code and added the screenshot below.

Advanced Validation Techniques

Let me explain you the advanced validation techniques:

Real-time Validation

Implement real-time validation to provide immediate feedback as users type:

$(document).ready(function() {
    // Real-time email validation
    $('#email').on('blur keyup', function() {
        const email = $(this).val().trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (email !== '' && !emailRegex.test(email)) {
            $('#emailError').text('Invalid email format').css('color', 'red');
            $(this).css('border-color', 'red');
        } else {
            $('#emailError').text('');
            $(this).css('border-color', '#ccc');
        }
    });

    // Real-time password strength validation
    $('#password').on('keyup', function() {
        const password = $(this).val();
        const strength = calculatePasswordStrength(password);

        $('#passwordStrength').text(strength.message).css('color', strength.color);
    });
});

function calculatePasswordStrength(password) {
    if (password.length < 6) {
        return { message: 'Weak - Too short', color: 'red' };
    } else if (password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/)) {
        return { message: 'Strong', color: 'green' };
    } else {
        return { message: 'Medium', color: 'orange' };
    }
}

I executed the above example code and added the screenshot below.

Custom Validation Rules

Create reusable validation functions for complex scenarios:

const ValidationRules = {
    required: function(value) {
        return value.trim() !== '';
    },

    minLength: function(value, min) {
        return value.length >= min;
    },

    maxLength: function(value, max) {
        return value.length <= max;
    },

    email: function(value) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(value);
    },

    phone: function(value) {
        const regex = /^\(\d{3}\)\s\d{3}-\d{4}$/;
        return regex.test(value);
    },

    zipCode: function(value) {
        const regex = /^\d{5}(-\d{4})?$/;
        return regex.test(value);
    }
};

function validateField(fieldId, rules) {
    const value = $(fieldId).val().trim();
    const errorId = fieldId + 'Error';

    for (let rule of rules) {
        if (!ValidationRules[rule.type](value, rule.param)) {
            $(errorId).text(rule.message);
            return false;
        }
    }

    $(errorId).text('');
    return true;
}

// Usage example
$('#registrationForm').on('submit', function(e) {
    e.preventDefault();

    const validations = [
        validateField('#username', [
            { type: 'required', message: 'Username is required' },
            { type: 'minLength', param: 3, message: 'Username must be at least 3 characters' }
        ]),
        validateField('#email', [
            { type: 'required', message: 'Email is required' },
            { type: 'email', message: 'Please enter a valid email' }
        ]),
        validateField('#zipcode', [
            { type: 'required', message: 'ZIP code is required' },
            { type: 'zipCode', message: 'Please enter a valid ZIP code' }
        ])
    ];

    if (validations.every(v => v === true)) {
        this.submit();
    }
});

Use jQuery Validation Plugin

For more complex applications, consider using the popular jQuery Validation Plugin:

$(document).ready(function() {
    $('#myForm').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                phoneUS: true
            }
        },
        messages: {
            name: {
                required: "Please enter your name",
                minlength: "Name must be at least 2 characters long"
            },
            email: {
                required: "Please enter your email",
                email: "Please enter a valid email address"
            },
            phone: {
                required: "Please enter your phone number",
                phoneUS: "Please enter a valid US phone number"
            }
        },
        submitHandler: function(form) {
            // Form is valid, submit it
            form.submit();
        }
    });
});

Best Practices for jQuery Form Validation

Here are some best practices for jQuery form validation.

1. Always Validate on Server-Side

Client-side validation improves user experience but should never be your only line of defense.

2. Provide Clear Error Messages

Define and store descriptive messages for form validation feedback.

const errorMessages = {
    required: "This field is required",
    email: "Please enter a valid email address",
    minLength: "Must be at least {0} characters",
    maxLength: "Cannot exceed {0} characters"
};

3. Use Visual Indicators

Enhance UX by styling input fields to indicate errors or success visually.

.error {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 5px;
}

.field-error {
    border: 1px solid #dc3545;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
}

.field-success {
    border: 1px solid #28a745;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
}

4. Prevent Multiple Submissions

Disable the submit button to avoid duplicate form submissions during processing.

$('#submitForm').on('submit', function(e) {
    const $submitBtn = $(this).find('[type="submit"]');

    if ($submitBtn.prop('disabled')) {
        e.preventDefault();
        return false;
    }

    if (validateForm()) {
        $submitBtn.prop('disabled', true).text('Submitting...');
        // Allow form submission
    } else {
        e.preventDefault();
    }
});

Common Validation Patterns

Let me show you some common validation patterns:

Credit Card Validation

Use a regex pattern to verify if a credit card number is correctly formatted.

function validateCreditCard(cardNumber) {
    const regex = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13})$/;
    return regex.test(cardNumber.replace(/\s/g, ''));
}

Date Validation

Check if a given string can be parsed into a valid JavaScript Date object.

function validateDate(dateString) {
    const date = new Date(dateString);
    return date instanceof Date && !isNaN(date);
}

jQuery form validation before submit is essential for creating robust web applications. By implementing proper validation techniques, you can significantly improve user experience while maintaining data quality. Remember to combine client-side validation with server-side validation for maximum security and reliability.

Whether you choose to write custom validation rules or use established plugins, the key is consistency, clear error messaging, and providing users with immediate, helpful feedback. Start with basic validation and gradually implement more advanced features as your application grows.

You may read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/