How to Dynamically Validate All Fields in jQuery

In this article, I’ll show you how to validate all fields in jQuery with ease dynamically. Whether you’re working on a registration form, feedback form, or any other type of input form, dynamic validation ensures that all your fields meet specific criteria before submission.

This approach saves time, improves user experience, and minimizes errors.

When working on a form with more than 100 fields, I implemented dynamic jQuery validation for the entire form instead of creating manual validation for each field.

How to Dynamically Validate All Fields in jQuery

How to Dynamically Validate All Fields in jQuery

 

Create Form

In this step, we'll create a form with different input fields and types.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Form with Dynamic Validation</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        /* Custom error styling */
        .error {
            border-color: red;
        }
        .error-message {
            color: red;
            font-size: 0.875rem;
        }
    </style>
</head>
<body>

<div class="container my-5">
    <h2 class="text-center mb-4">Example Fields with Dynamic Validation</h2>
    <form id="myForm">
        <!-- First Name Field -->
        <div class="mb-3">
            <label for="first_name" class="form-label">First Name:</label>
            <input type="text" id="first_name" name="first_name" class="form-control" data-required="true" data-minlength="3" data-error="Please enter a valid first name">
            <div class="invalid-feedback"></div>
        </div>

        <!-- Last Name Field -->
        <div class="mb-3">
            <label for="last_name" class="form-label">Last Name:</label>
            <input type="text" id="last_name" name="last_name" class="form-control" data-required="true" data-minlength="3" data-error="Please enter a valid last name">
            <div class="invalid-feedback"></div>
        </div>

        <!-- Email Field -->
        <div class="mb-3">
            <label for="email" class="form-label">Email:</label>
            <input type="email" id="email" name="email" class="form-control" data-required="true" data-email="true" data-error="Please enter a valid email">
            <div class="invalid-feedback"></div>
        </div>

        <!-- Age Field -->
        <div class="mb-3">
            <label for="age" class="form-label">Age:</label>
            <input type="number" id="age" name="age" class="form-control" data-required="true" data-min="18" data-error="Age must be at least 18">
            <div class="invalid-feedback"></div>
        </div>

        <!-- Gender Field -->
        <div class="mb-3">
            <label class="form-label">Gender:</label><br>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" value="male" data-required="true">
                <label class="form-check-label" for="gender">Male</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" value="female">
                <label class="form-check-label" for="gender">Female</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" value="other">
                <label class="form-check-label" for="gender">Other</label>
            </div>
            <div class="invalid-feedback"></div>
        </div>

        <!-- Country Field -->
        <div class="mb-3">
            <label for="country" class="form-label">Country:</label>
            <select id="country" name="country" class="form-select" data-required="true" data-error="Please select a country">
                <option value="">Select a country</option>
                <option value="us">United States</option>
                <option value="ca">Canada</option>
            </select>
            <div class="invalid-feedback"></div>
        </div>

        <!-- Terms and Conditions Field -->
        <div class="mb-3 form-check">
            <input class="form-check-input" type="checkbox" id="terms" name="terms" data-required="true" data-error="You must accept the terms">
            <label class="form-check-label" for="terms">Accept Terms</label>
            <div class="invalid-feedback"></div>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
</body>
</html>

 

Create Dynamic jQuery Validation

After that, we'll create dynamic validation for all the fields.

<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        $('#myForm').submit(function (event) {
            event.preventDefault();  // Prevent form submission to perform validation

            var isValid = true;  // Flag for overall validation
            var errorMessages = [];  // Array to store error messages

            // Loop through each input field and apply validations dynamically
            $('input, select').each(function () {
                var $field = $(this);
                var fieldName = $field.attr('name');
                var fieldValue = $field.val().trim();
                var errorMessage = $field.data('error') || 'This field is invalid.';
                var fieldIsValid = true;  // Flag for individual field validation

                // Reset error state before validation
                $field.removeClass('is-invalid'); 
                $field.next('.invalid-feedback').text('');

                // Check for required fields
                if ($field.data('required') && !fieldValue) {
                    isValid = false;
                    $field.addClass('is-invalid');
                    $field.next('.invalid-feedback').text(errorMessage);
                    fieldIsValid = false;
                }

                // Validate email format (if applicable)
                if ($field.data('email') && fieldValue && !validateEmail(fieldValue)) {
                    var emailErrorMessage = $field.data('error') || 'Please enter a valid email.';
                    isValid = false;
                    $field.addClass('is-invalid');
                    $field.next('.invalid-feedback').text(emailErrorMessage);
                    fieldIsValid = false;
                }

                // Validate minimum length (if applicable)
                if ($field.data('minlength') && fieldValue.length < $field.data('minlength')) {
                    var minlengthErrorMessage = $field.data('error') || `Please enter at least ${$field.data('minlength')} characters.`;
                    isValid = false;
                    $field.addClass('is-invalid');
                    $field.next('.invalid-feedback').text(minlengthErrorMessage);
                    fieldIsValid = false;
                }

                // Validate minimum value for number fields (if applicable)
                if ($field.data('min') && fieldValue < $field.data('min')) {
                    var minErrorMessage = $field.data('error') || `Value must be at least ${$field.data('min')}.`;
                    isValid = false;
                    $field.addClass('is-invalid');
                    $field.next('.invalid-feedback').text(minErrorMessage);
                    fieldIsValid = false;
                }

                // Validate radio buttons (if applicable)
                if ($field.is(':radio') && $field.data('required')) {
                    var groupName = $field.attr('name');
                    if (!$(`input[name="${groupName}"]:checked`).length) {
                        isValid = false;
                        $(`input[name="${groupName}"]`).closest('.form-check').addClass('is-invalid');
                        $field.closest('.form-check').find('.invalid-feedback').text('Please select an option.');
                        fieldIsValid = false;
                    }
                }

                // Validate select dropdown (if applicable)
                if ($field.is('select') && $field.data('required') && !fieldValue) {
                    isValid = false;
                    $field.addClass('is-invalid');
                    $field.next('.invalid-feedback').text(errorMessage);
                    fieldIsValid = false;
                }

                // Validate checkbox (if applicable)
                if ($field.is(':checkbox') && $field.data('required') && !$field.prop('checked')) {
                    isValid = false;
                    $field.addClass('is-invalid');
                    $field.next('.invalid-feedback').text($field.data('error') || 'You must accept the terms');
                    fieldIsValid = false;
                }
            });

            // Show alert if validation fails
            if (!isValid) {
                alert("Form Validation Errors:\n" + errorMessages.join("\n"));
            } else {
                alert("Form is valid. Submitting...");
                // If valid, submit the form
                this.submit();
            }
        });

        // Helper function to validate email format
        function validateEmail(email) {
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }
    });
</script>

 


You might also like:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS