DEV Community

Cover image for Dynamic Ajax Form Validation in PHP & MySQL using jQuery
Code And Deploy
Code And Deploy

Posted on


Dynamic Ajax Form Validation in PHP & MySQL using jQuery

Originally posted @ visit and download the sample code:

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;
Enter fullscreen mode Exit fullscreen mode

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.

        "required":"Email is required."
        "required":"First name is required."
        "required":"Last name is required."
        "required":"Address is required."
Enter fullscreen mode Exit fullscreen mode

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")) {

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

            // Remove error message on keyup by the textbox
            $(fieldSelector).on("keyup", function() {
Enter fullscreen mode Exit fullscreen mode

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
            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

                    // We will display the result using alert
                      icon: 'success',
                      title: 'Success.',
                      text: response.response

                    // Reset 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
Enter fullscreen mode Exit fullscreen mode

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 if you want to download this code.

Thank you for reading. Happy Coding :)

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.