If you want to stop multiple form submission issue with jQuery validation then don't worry. I am here going to explain you a very simple way to fix multi time form submition issue with jquery validation
To prevent the multiple form submit issue with jQuery validation, You will require to add submitHandler function in your jquery validation code .
Your jquery code will look like this:
$(document).ready(function(){
$("#get-started").validate({
debug: false,
errorElement: "em",
errorContainer: $("#warning, #summary"),
errorPlacement: function(error, element) {
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append( error );
},
success: function(label) {
label.html(';').addClass("success");
},
onkeyup:false,
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
.addClass('errorTick').removeClass('rightTick');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
.removeClass('errorTick').addClass('rightTick');
},
errorElement: "span",
rules: {
name: {
required:{
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
}
},
email: {
required: true
},
phone:{
required:true,
digits: true
},
},
messages: {
name: "Enter name",
email: {
required: "Enter email",
customEmail: "Invalid email"
},
phone: {
required: "Enter number",
digits: "Enter digits only"
},
}
});
});Above code validation will work fine with your form but it will not stop the multiple form submit action.
Now question is "How I can test that my form are going to submit multi time or not? "
It's very simple to test the multi submit issue with your form, First fill the all required fields and then click continuously around 10 time on form submit button.
Now check your email inbox, If your website form have multi submit issue then you should received 10 separate email on same time on a single form submit.
Now lets come on solution to stop multi form submit issue.
To prevent the multiple form submit issue you will require to add submitHandler function in your jquery validation.
submitHandler: function (form) {
// Prevent double submission
if (!this.beenSubmitted) {
this.beenSubmitted = true;
form.submit();
}
}Updated code will be look like given below
$(document).ready(function(){
$("#get-started").validate({
debug: false,
errorElement: "em",
errorContainer: $("#warning, #summary"),
errorPlacement: function(error, element) {
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append( error );
},
success: function(label) {
label.html(';').addClass("success");
},
onkeyup:false,
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
.addClass('errorTick').removeClass('rightTick');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
.removeClass('errorTick').addClass('rightTick');
},
errorElement: "span",
rules: {
name: {
required:{
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
}
},
email: {
required: true
},
phone:{
required:true,
digits: true
},
},
messages: {
name: "Enter name",
email: {
required: "Enter email",
customEmail: "Invalid email"
},
phone: {
required: "Enter number",
digits: "Enter digits only"
},
},
submitHandler: function (form) {
// Prevent double submission
if (!this.beenSubmitted) {
this.beenSubmitted = true;
form.submit();
}
}
});
})Note: Here "get-started" is the form id, you will need to update it as per your form id.
All the best! :)
