Dynamic Ajax Form Validation in PHP & MySQL using jQuery

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/php/dynamic-ajax-form-validation-in-php-mysql-using-jquery

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

In this post, I will show you how to create an ajax form validation in PHP & MySQL using jQuery. In my previous tutorial, I created a "Simple Dynamic Form Validation Function Using PHP" just click it to know more about the PHP function. So now I will display the error response from the server-side then show it in every form field. So here is the example result:

CSS Form Validation Styles

Form validation style code using CSS. You will see this code inside assets/css/styles.css when you download the complete code.

/*Form Validation Error Styles*/
.form-group.error label,
.form-group.error .error-message {
    color:  red;
}

.form-group.error .form-control {
    border: 1px solid red;
}

JS Form Validation Function

In this section, I will show you the actual code of my jquery/javascript function with comments so that you understand how I code it.

Before I will show you the code I will show you first the sample error JSON Array response from the server.

{
    "email":{
        "required":"Email is required."
    },
    "first_name":{
        "required":"First name is required."
    },
    "last_name":{
        "required":"Last name is required."
    },"address":{
        "required":"Address is required."
    }
}

Then below is my complete function to process the server form validation response.

/**
 * A validation form function that will parse the json array and display to each fields
 *
 * @param {string} selector - The form selector
 * @param {json} errors - The json array response from the server form validation
 * @return {any}
 */
function validationForm(selector, errors) 
{
    // Loop the form errors
    $.each(errors, function(fieldName, fieldErrors) 
    {
        $.each(fieldErrors, function(errorType, errorValue) {

            var fieldSelector = selector + " [name='"+fieldName+"']";

            // Check if the ".form-group" class has still ".error" class
            // Then remove the ".error-message" element
            // Then rmove the ".error" class at ".form-group" class
            // To prevent element error duplication
            if($(fieldSelector).parents(".form-group").hasClass("error")) {
                $(fieldSelector).parents(".form-group").find(".error-message").remove();
                $(fieldSelector).parents(".form-group").removeClass("error");
            }

            // Insert error message after the textbox element 
            // Then add class ".error" to ".form-group" class for style needed
            $("<p class='error-message'>"+errorValue+"</p>")
                .insertAfter(fieldSelector)
                .parents(".form-group").addClass('error');

            // Remove error message on keyup by the textbox
            $(fieldSelector).on("keyup", function() {
                $(fieldSelector).parents(".form-group").find(".error-message").remove();
                $(fieldSelector).parents(".form-group").removeClass("error");
            });
        });
    });
}

Code Implementation

Since I already show the function now it's time to implement it in actuality. So here is the code on how to implement it.

function save() 
{
    $("#btnSubmit").on("click", function() {
        var $this           = $(this); //submit button selector using ID
        var $caption        = $this.html();// We store the html content of the submit button
        var form            = "#form"; //defined the #form ID
        var formData        = $(form).serializeArray(); //serialize the form into array
        var route           = $(form).attr('action'); //get the route using attribute action

        // Ajax config
        $.ajax({
            type: "POST", //we are using POST method to submit the data to the server side
            url: route, // get the route value
            data: formData, // our serialized array data for server side
            beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                $this.attr('disabled', true).html("Processing...");
            },
            success: function (response) {//once the request successfully process to the server side it will return result here

                response = JSON.parse(response);

                // Check if there is has_error property on json response from the server
                if(!response.hasOwnProperty('has_error')) {
                    // Reload lists of employees
                    all();

                    // We will display the result using alert
                    Swal.fire({
                      icon: 'success',
                      title: 'Success.',
                      text: response.response
                    });

                    // Reset form
                    resetForm(form);
                } else {
                    // We will display the result using alert
                    validationForm("#form", response.errors);
                }

                $this.attr('disabled', false).html($caption);

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // You can put something here if there is an error from submitted request
            }
        });
    });
}

As you can see above code I have the save() function to store record but if the server found an error then it will not completely save it and response an error array which I parse it as JSON in client-side. As you can see in the ajax success() function I have a condition to check if the response has not JSON property "has_error" but if the "has_error" property exists then it will continue to else which we call the validatationForm() function with each parameter.

So that's pretty much it. I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/php/dynamic-ajax-form-validation-in-php-mysql-using-jquery if you want to download this code.

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

Thank you for reading. Happy Coding :)