Jquery validation remote validation caching problem solution_jquery

Jquery validation has been used in recent projects for verification. Combining bootstrap and jquery form feels good. But the cache problem of remote verification has given me a headache for a long time, and I almost gave up on this plug-in.

Example:

Existing school, grade, class entity

The same school cannot have the same grade, and the same grade cannot have the same class

Take the same school that cannot have the same grade as an example. Use the remote method when verifying:

JS

Copy code The code is as follows:

"gradeId" : {
required : true,
min : 0,
remote: {
url: "gradeManager -checkGrade.action",
type: "post",
dataType: "json",
data: {
'gradeId' : function() {
return $("#gradeId ").val();
},
'schoolId' : function() {
return $("#schoolId").val();
}
}
}
}

HTML

Copy code The code is as follows:

school

listValue="schoolName" headerKey="-1" headerValue="Please select a school">

grade

listValue="gradeName" headerKey="-1" headerValue="Please select a grade">

There are currently two schools, Testing School 1 and Testing School 2. Among them, Testing School 1 has two grades: first grade and second grade.

Theoretically, after adding In grade, if the school chooses to test school 1, then when selecting the first grade or the second grade of elementary school, the remote verification will report an error "This grade already exists"

In fact, the result is also correct the first time it is operated.

But if you change the school at this time, for example, choose test school 2, due to cache problems, the validation plug-in will not re-perform a new remote verification and will directly return the results of the last verification, so There are the following painful errors

This is not the most difficult thing to accept. The more serious problem is if you first choose test school 2, and the first grade of elementary school, the remote verification is passed. At this time Then select test school 1, and the remote verification still passes. If there are no verifications of the same grade in the same school, it means failure


So various query solutions were carried out

There is a saying that adding "cache: false" to remote, but the actual test did not solve the problem

I tried binding the onchange event on the school drop-down box to clear the gradeId value, but it still did not solve the problem

I checked the validation API and found that the .valid() method can actively trigger verification. However, due to caching issues, the remote still did not re-verify.

I also checked the source code of validation and found that there is a previousValue in it. , if there is a value, it will directly return the previous verification result

So I tried to clear the value

Copy code The code is as follows:

$("#schoolId").change(function(){
$("#gradeId").removeData("previousValue");
});

Successfully solved the problem