If jquery + ajax verification fails, it also submits the form for troubleshooting. jqueryajax

If jquery + ajax verification fails, it also submits the form for troubleshooting. jqueryajax

ValidationEngine reduces the workload for front-end form verification. In most cases, we use validationEngine to verify the form in several ways:

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

2. submit the form using ajax, but do not use ajax for verification.

This method is also relatively simple. You can check whether the verification is successful before using ajax requests. For example:

Copy codeThe Code is as follows:
// Return
If (! $ ("Form # ajaxForm"). validationEngine ("validate") return;
$. Ajax ({
Type: "POST ",
Url: $ ("# ajaxForm"). attr ("action "),
Data: $ ("# ajaxForm"). serialize (),
DataType: "html ",
Success: function (data ){
Xxxx}
});

3. Use normal form submission, but use ajax for verification. This method is a bit confusing. when we submit a form, the form can be submitted even if ajax verification fails. In this case, many examples on the Internet are source code changes. below is:

This method is feasible for the current situation. This modification method itself is not recommended and may affect other places. One of the ways I found is when:

Copy codeThe Code is as follows:
Function beforeCall (form, options ){
If (window. console ){
Console. log ("Callback before Ajax submission after the form is submitted for verification ");
};
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 a form
AjaxFormValidationMethod: 'post', // sets the method for sending data when Ajax is submitted.
OnAjaxFormComplete: ajaxValidationCallback, // form submission, after Ajax verification is complete
OnBeforeAjaxFormValidation: beforeCall // callback before Ajax submission after the form is submitted for verification
});
});

BeforeCall is not called or called, so it still cannot be used.

4. Using ajax for verification and submitting forms using ajax makes it difficult to use this method. The above method of modifying the source code is not easy to use.

For Methods 3 and 4, the solution is as follows:

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

Copy codeThe Code is as follows:
<Form method = "post" id = "ajaxForm2Controls" action = "admin/user/savePro.htm" control = "userName">

Add two Property URLs (the address of the ajax request) and errror on each control to be verified (the prompt information is out of date)

Copy codeThe Code is as follows:
<Input class = "textBox validate [required, minSize [6], maxSize [128], custom [onlyLetterNumber] "type =" text "name =" userName "id =" userName "maxlength =" 128 "url =" admin/user/uniqueName.htm "error =" user already exist... "/>

Declare two global arrays in javascript

Copy codeThe Code is as follows:
Var controlId = new Array (); // Save the ID of the control that fails Verification
Var errors = new Array (); // Save the prompt that the verification fails.

The idea is to obtain the value of the control attribute on the form tag (Use commas to separate each control ID) and use ajax to traverse the request, when the verification fails, add the Control ID and prompt information to controlId and errors, and prompt information. when the form is submitted, it determines whether the controlId is null. If it is not empty, a message is displayed cyclically.

Copy codeThe Code is as follows:
$ (Function (){
Var ajaxForm2Controls = $ ("form # ajaxForm2Controls ");
// When the form is submitted
$ (AjaxForm2Controls). submit (function (){
AjaxForm2Control (ajaxForm2Controls );
Return false;
});
// Verify the control when the focus is lost
ValControls (ajaxForm2Controls );
});

Form submission method:

Copy codeThe Code is as follows:
Function ajaxForm2Control (obj ){
// If an error message exists, the system returns the error message.
If (controlId. length> 0 ){
Alertinfo ();
Return false;
}
If (! $ (Obj ). validationEngine ("validate") return false; // verify that the control that is not verified by ajax is not used (fields that are not verified by ajax 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 ){
Xxxxxx
}
});
}

Add focus events to a form

Copy codeThe Code is as follows:
// Controls for Form Verification
Function valControls (ajaxForm2Controls ){
// Obtain the control that requires ajax Verification
Var controlsStr = ajaxForm2Controls. attr ("control ");
// Return if the property is not defined
If (typeof (controlsStr) = "undefined" | controlsStr. length <= 0) return;
// Obtain the control IDs separated by commas (,).
Var controls = controlsStr. split (/,/g );
For (var I in controls ){
// Add a focus exit event
$ ("#" + Controls [I]). blur (function (){
If ($ (this). val (). length <= 0) return false;
// 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 "){
// If the verification fails, add the error message to the array.
ControlId. push (controls [I]);
Errors. push (error );
// Prompt message
Alertinfo ();
}
}
});
});
}
}

Error message:

Copy codeThe Code is as follows:
// Pop-up information
Function alertinfo (){
If (controlId. length> 0 ){
For (var I in controlId ){
// ValidationEngine method. A prompt is displayed for the specified ID.
// Usage: <span style = "" >$ ("# id"). validationEngine ("showPrompt", "prompt content", "load ");
// <Span style = ""> Create a prompt on this element. Three statuses: "pass", "error", "load" </span>
$ ("#" + ControlId [I]). validationEngine ("showPrompt", errors [I], "error ");
}
}
}

In this way, when you submit a form in either the third or fourth mode, you can call controlId to check whether there is a value before submission.