Caching problem resolution for validation remote of Jquery validation

  • 2020-03-30 02:26:46
  • OfStack

Recently, I have been using Jquery validation for validation in the project, and it feels good to combine bootstrap with Jquery form. But the cache problems with remote's validation gave me such a long headache that it was almost like giving up on the plug-in.

Examples:

Existing school, grade, class entities

You can't have the same grade in the same school, you can't have the same class in the same grade

Taking the same school as an example, we can't have the same grade. When verifying, we use remote:

JS
 
"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
 
<div class="control-group"> 
<label class="control-label" for="schoolId"> The school </label> 
<div class="controls"> 
<s:select name="schoolId" list="schools" listKey="schoolId" 
listValue="schoolName" headerKey="-1" headerValue=" Please choose a school "></s:select> 
</div> 
</div> 

<div class="control-group"> 
<label class="control-label" for="gradeId"> grade </label> 
<div class="controls"> 
<s:select name="gradeId" list="grades" listKey="gradeId" 
listValue="gradeName" headerKey="-1" headerValue=" Please select grade "></s:select> 
</div> 
</div> 

Now there are test schools 1, test schools 2, two schools, which test school 1 has primary school grade 1, primary school grade 2 two grades

In theory, if the school chooses to test school 1 in the new grade, then the remote verification in the first grade and the second grade of primary school will report an error "the grade already exists".

In fact, the first operation, the result is also correct
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403251743531.gif? 2014225174414 ">  
But if you change the school at this point, such as selecting test school 2, the validation plug-in does not revalidate the new remote due to caching problems, but instead returns the results of the previous validation, resulting in the following painful error
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403251744532.gif? 201422517455 ">  
This is not the most difficult to accept. For more serious problems, if you first choose the test school 2, and the first grade of primary school, remote verification passed, then choose the test school 1, remote verification still passed, so that the same school can not have the same grade of verification is equal to failure


So a variety of query solutions

One theory is that adding "cache: false" to remote doesn't solve the problem

An attempt to bind the onchange event on the school drop-down box to clear the value of gradeId failed

Checking the validation API, I found that the.valid() method could actively trigger validation, but remote still did not revalidate due to caching issues

You also looked at the source of the validation and saw that there was a previousValue in it that would return the previous validation if it had a value
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403251745323.gif? 2014225174545 ">  
So I tried to clear this value
 
$("#schoolId").change(function(){ 
$("#gradeId").removeData("previousValue"); 
}); 

Problem solving

Related articles: