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 :)
Top comments (0)