Jquery+ajax validation does not also submit form problem handling _jquery

Validationengine gives us a lot of work to do with the form validation for the front end. In most cases we use validationengine to validate forms in several ways:

1 Use a normal form submission. This situation validationengine validation does not commit the form.

2 submitting the form using AJAX, but not using AJAX validation.

This approach is also relatively simple, before we use the AJAX request to check whether the validation is passed, such as:

Copy Code code as follows:

Return when validation is not passed
if (!$ ("Form#ajaxform"). Validationengine ("validate")) return;
$.ajax ({
Type: "POST",
URL: $ ("#ajaxForm"). attr ("action"),
Data: $ ("#ajaxForm"). Serialize (),
DataType: "HTML",
Success:function (data) {
XXXX}
});

3 using a normal form submission, but using AJAX validation, is a bit of a struggle. When we submit the form, Ajax validation can also be submitted to the form, in this case, the online many examples are changed source, the following is a screenshot:

This approach is feasible for the present situation, and the manner in which it is modified is not recommended in itself and may have an impact elsewhere. One of the things I found was when this happens:

Copy Code code as follows:

function Beforecall (form,options) {
if (window.console) {
Console.log ("form submission verification passed after Ajax submission of callbacks");
};
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 submit a form using Ajax
Ajaxformvalidationmethod: ' Post ',//Setting the way to send data when Ajax commits
Onajaxformcomplete:ajaxvalidationcallback,//form submission, Ajax verification complete
After the Onbeforeajaxformvalidation:beforecall//form submission verification passes, Ajax submits the callback before
});
});

Beforecall This method is not invoked and is not invoked, so it is still not possible to use the

4 Use AJAX validation and use Ajax to submit the form, this way is tangled, the above changes in the source code is not used.

For the third and fourth approaches, the solution is as follows:

Add a custom attribute to the form label with Ajax validation control= the "Username,email" property value is the ID of the control to be validated with Ajax (multiple controls are separated by commas).

Copy Code code as follows:

<form method= "POST" id= "Ajaxform2controls" action= "admin/user/savepro.htm" control= "UserName" >

Add two property URLs (Ajax-requested addresses) and errror to each control that needs to be validated (an outdated message)

Copy Code code 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 exists ... "/>

Two global arrays declared in JavaScript

Copy Code code as follows:

var controlId = new Array (); Save validation not passing control ID
var errors = new Array (); To save a message that the validation does not pass

This is the idea. Gets the value on the control property on the form label (each control ID is separated by a comma), uses Ajax to traverse the request, and when the validation does not pass, the controls ID and the hint information are added to ControlID and errors. and prompts the message. When the form is submitted, it is not empty to determine whether the ControlID is empty, and the prompt is circulated.

Copy Code code as follows:

$ (function () {
var ajaxform2controls = $ ("Form#ajaxform2controls");
When form is submitted
$ (Ajaxform2controls). Submit (function () {
Ajaxform2control (Ajaxform2controls);
return false;
}) ;
Validation controls when focus is lost
Valcontrols (Ajaxform2controls);
});

Form Submission Method:

Copy Code code as follows:

function Ajaxform2control (obj) {
Returns when an error message exists, looking for an error message
if (Controlid.length > 0) {
Alertinfo ();
return false;
}
if (!$ (obj). Validationengine ("validate")) return false; Validate controls that do not use Ajax validation (fields that are not validated by Ajax are normally validated and returned without passing)
$.ajax ({
Type: "POST",
URL: $ (obj). attr ("action"),
Data: $ (obj). Serialize (),
DataType: "HTML",
Success:function (data) {
Xxxxxx
}
});
}

Add focus events to a form

Copy Code code as follows:

Controls that the form needs to validate
function Valcontrols (ajaxform2controls) {
Get controls that need to be validated with Ajax
var controlsstr = ajaxform2controls.attr ("control");
Returns when a property is undefined
if (typeof (controlsstr) = = "Undefined" | | controlsstr.length <= 0) return;
Separating get control IDs
var controls = Controlsstr.split (/,/g);
for (var i in controls) {
Add Focus Left Event
$ ("#" + Controls[i]). blur (function () {
if ($ (this). Val (). length <= 0) return false;
Reset 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") {
Verify that the error message is not placed in an array
Controlid.push (Controls[i]);
Errors.push (Error);
Hint Information
Alertinfo ();
}
}
});
}) ;
}
}

Error message:

Copy Code code as follows:

Pop-up information
function Alertinfo () {
if (Controlid.length > 0) {
for (var i in controlId) {
Validationengine method to eject the prompt for the specified ID.
Usage: <span style= "" >$ ("#id"). Validationengine ("Showprompt", "Hint content", "load");
<span style= "" > Create a hint on the element, 3 states: "Pass", "error", "Load" </span></span>
$ ("#" + Controlid[i]). Validationengine ("Showprompt", errors[i), "error");
}
}
}

So when we submit the form either in the third way or fourth way, it is OK to call ControlID before submitting it.