jquery ajax verification fails and the form is submitted to solve the problem_jquery

validationEngine reduces a lot of work for us in front-end form validation. In most cases, we use validationEngine to validate forms in several ways:

1 Use normal form submission. In this case, the form will not be submitted if validationEngine fails the verification.

2 Use ajax to submit the form, but do not use ajax verification.

This method is also relatively simple, just check whether the verification is passed before we use ajax request, for example:

Copy code The code is as follows:

//return when verification fails
If(!$("form#ajaxForm").validationEngine("validate")) return ;
$.ajax({
Type: "POST",
URL: $("#ajaxForm").attr("action"),
Data: $("#ajaxForm").serialize(),
DataType: "html",
Success: function(data){
                                                    });

3 Use the normal form to submit, but use ajax verification. This method is a bit confusing. When we submit the form, the form can be submitted even if the ajax verification does not pass. Regarding this situation, many examples on the Internet are to change the source code. , the following is a screenshot:

. This method is feasible for the current situation. This modification method itself is not recommended and may have an impact on other places. One of the things I found is when the following situation occurs:

Copy code The code is as follows:

function beforeCall(form,options){
If(window.console){
console.log("After the form submission verification is passed, the callback before Ajax submission");
};
Return true;
};
//
function ajaxValidationCallback(status,form,json,options){
If(window.console){
console.log(status);
};
If(status === true){
alert("the form is valid!");
}  
};
jQuery(document).ready(function(){
jQuery("#formID").validationEngine({
ajaxFormValidation: true, //Whether to use Ajax to submit the form
ajaxFormValidationMethod: 'post', //Set the way to send data when Ajax submits
onAjaxFormComplete: ajaxValidationCallback, //Form submission, after Ajax verification is completed
onBeforeAjaxFormValidation: beforeCall //After the form submission verification is passed, the callback before Ajax submission
});
});

beforeCall This method will not be called, so it still cannot be used

4 Use ajax to verify and submit the form using ajax. This method is confusing, and the method of modifying the source code above is not easy to use.

For the third and fourth methods, the solutions are as follows:

Add the custom attribute control="userName,email" to the form tag that uses ajax verification. The attribute value is the ID of the control to be verified using ajax (multiple controls are separated by commas).

Copy code The code is as follows:

Add two attributes url (the address of the ajax request) and error (the prompt message when it fails) to each control that needs to be verified

Copy code The code is as follows:

Declare two global arrays in javascript

Copy code The code is as follows:

var controlId = new Array(); //Save the control ID that failed verification
var errors = new Array(); //Save the prompt message for failed verification

The idea is to get the value of the control attribute on the form tag (use commas to separate each control ID), use ajax to traverse the request, and when the verification fails, add the control ID and prompt information to controlId and errors. , and prompt information. When submitting the form, determine whether the controlId is empty. If it is not empty, the prompt information will be displayed in a loop.

Copy code The code is as follows:

$(function() {
var ajaxForm2Controls = $("form#ajaxForm2Controls") ;
//When the form is submitted
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls) ;
          return false ;                                  }) ;
//Validate controls when losing focus
valControls(ajaxForm2Controls);
});

Form submission method:

Copy code The code is as follows:

function ajaxForm2Control(obj) {
//Return when there is an error message and display the error message
If(controlId.length > 0) {
alertinfo() ;
          return false ;                                        }  
If(!$(obj).validationEngine("validate")) return false; //Verify controls that do not use ajax verification (fields that are not ajax verified can be verified normally, and will be returned if they fail)
$.ajax({
Type: "POST",
URL: $(obj).attr("action"),
Data: $(obj).serialize(),
DataType: "html",
Success: function(data){
                                                                                          }                                                                                                    });
}



Add focus event to form

Copy code

The code is as follows:

//Controls that need to be verified in the form
function valControls(ajaxForm2Controls) {
//Get controls that require ajax verification
var controlsStr = ajaxForm2Controls.attr("control");
//Return when the attribute is undefined
If(typeof(controlsStr) === "undefined" || controlsStr.length //Separately obtain the control ID
var controls = controlsStr.split(/,/g) ;
for(var i in controls) {
//Add focus leaving event
           $("#" controls[i]).blur(function() { 
If($(this).val().length //Reset the array
                  controlId.length = 0;                                         errors.length = 0;                           //Error message
            var error = $(this).attr("error") ;  
$.ajax({
Type: "GET",
​​​​​​ url: $(this).attr("url"),
Data: $(this).serialize(),
DataType: "text",
Success: function(data){
If(data==="true") {
//Put the error message into the array if the verification fails
                                                                                                                                                                                                                                                              controlId.push(controls[i]);                                                           errors.push(error);                                                                                                                                                                                               alertinfo() ;
                                                                                                                                                                                                                                                                         });                                      }) ;                           }  
}



Error message:





Copy code

The code is as follows:

//Pop-up message
function alertinfo() {
If(controlId.length > 0) {
for(var i in controlId) {
//validationEngine method, pops up a prompt for the specified ID.
                                                            // Usage:$("#id").validationEngine("showPrompt","Prompt content","load");
                                                                                                                                                                                                                                          //Create a prompt on this element, 3 states: "pass", "error", "load"
                 $("#" controlId[i]).validationEngine("showPrompt", errors[i], "error");
                                                                            }  
}

In this way, when we submit the form in the third or fourth way, we can just call the controlId to see if there is a value before submitting.