Jquery +ajax validation does not pass also submit form problem handling
- 2020-03-30 04:34:44
- OfStack
ValidationEngine saves us a lot of work on front end form validation. Most of the time we use validationEngine to validate forms in several ways:
Use normal form submission. In this case, the form will not be submitted until validationEngine validates.
2 submit the form using ajax, but without ajax validation.
This is also a simple way to check if the validation is ok before we use the ajax request, for example:
//Not verified out of date return < br / >
if(!$("form#ajaxForm").validationEngine("validate")) return ;
$.ajax({
type: "POST",
url: $("#ajaxForm").attr("action"),
data: $("#ajaxForm").serialize(),
dataType: "html",
success: function(data){
xxxx }
});
3. Normal form submission is used, but ajax validation is used, which is a bit confusing. When we submit a form, we can submit the form without passing ajax validation.
This method is feasible for the current situation, and this modification is not recommended in itself and may have an impact on other places. One of the things I have found is when:
function beforeCall(form,options){
if(window.console){
console.log(" After the form submission is verified, Ajax Callback before commit ");
};
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 the form using Ajax & NBSP; < br / >
ajaxFormValidationMethod: 'post', //Setting up how the data is sent when an Ajax commit & NBSP; < br / >
onAjaxFormComplete: ajaxValidationCallback, //Form submission, Ajax validation complete & NBSP; < br / >
onBeforeAjaxFormValidation: beforeCall //Callback & NBSP before the Ajax submission after the form submission has been validated; < br / >
});
});
This method is not called beforeCall is not called, so it can not be used
Using ajax to validate and submit forms using ajax is a confusing way to modify the source code above.
For the third and fourth approaches, the solution is as follows:
Add the custom property control="userName "to the form tag of the form using ajax validation, and the value of the email property is the id of the control to be validated using ajax (multiple controls separated by commas).
<form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">
Add two properties url(the address of the ajax request) and errror(an out-of-date message) to each control that needs to be validated
<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 ..."/>
Declare two global arrays in javascript
var controlId = new Array(); //Save the control ID
that failed validation
var errors = new Array() ; //Save a message that fails validation
The idea is to get the value of the control property on the form label (to separate each control ID with a comma), use ajax to iterate over the request, add the control ID and prompt to controlId and errors when the validation fails, and prompt the message.
$(function() {
var ajaxForm2Controls = $("form#ajaxForm2Controls") ;
//Form submission & NBSP; < br / >
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls) ;
return false ;
}) ;
//Verify control & PI when losing focus; < br / >
valControls(ajaxForm2Controls) ;
});
Form submission method:
function ajaxForm2Control(obj) {
//Returns when there is an error message, returns the error message & NBSP; < br / >
if(controlId.length > 0) {
alertinfo() ;
return false ;
}
if(!$(obj).validationEngine("validate")) return false; //Validate controls that are not validated with ajax (fields that are not validated with ajax can be validated normally and returned without passing)& NBSP; < br / >
$.ajax({
type: "POST",
url: $(obj).attr("action"),
data: $(obj).serialize(),
dataType: "html",
success: function(data){
xxxxxx
}
});
}
Add focus events to the form
//Control & NBSP that the form needs to validate < br / >
function valControls(ajaxForm2Controls) {
//Gets the control & NBSP that needs to be validated using ajax. < br / >
var controlsStr = ajaxForm2Controls.attr("control") ;
//Returns & NBSP when property is undefined; < br / >
if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;
//Separate gets control ID < br / >
var controls = controlsStr.split(/,/g) ;
for(var i in controls) {
//Add a focus departure event & NBSP; < br / >
$("#" + controls[i]).blur(function() {
if($(this).val().length <= 0) return false;
//Reset the array & NBSP; < br / >
controlId.length = 0;
errors.length = 0 ;
//Error message & NBSP; < br / >
var error = $(this).attr("error") ;
$.ajax({
type: "GET",
url: $(this).attr("url"),
data: $(this).serialize(),
dataType: "text",
success: function(data){
if(data==="true") {
//Validates by not putting the error information into the array & NBSP; < br / >
controlId.push(controls[i]);
errors.push(error) ;
//Prompt message & NBSP; < br / >
alertinfo() ;
}
}
});
}) ;
}
}
Error message:
//Pop-up message & NBSP; < br / >
function alertinfo() {
if(controlId.length > 0) {
for(var i in controlId) {
//ValidationEngine method that pops up a prompt for the specified ID. < br / >
//Usage: <Span style = ""> $(" # id "). ValidationEngine (" showPrompt ", "prompt content", "load"); < br / >
//<Span style = ""> Create a prompt on this element, 3 states: "pass", "error", "load"</ span> </ span> < br / >
$("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");
}
}
}
So when we submit the form either the third way or the fourth way, we call controlId to see if it has a value before we submit it.