Set the remote asynchronous validation of the jquery validate check frame to synchronous check

Source: Internet
Author: User
Tags json

Recently the company's projects are used in the jquery validate in the form, feel really very useful, very flexible, very handy. But also encountered a lot of problems. Record it here.

Problem: When submitting a form trigger check, the results of the remote check rule cannot be returned in time, resulting in a validation pass.

Scene:

In the modification page of the organization management, the teller is responsible for verifying the validity. The code is as follows:

Whether the checksum is repeated
Remote: {
URL: "CIFORG/CHECKMANTLR",//Background handler
Type: "POST",//Data sending method
DataType: "JSON",//Accept data format
Data: {//To be passed
Mantlr:function () {
Return $ ("Input[name= ' MANTLR ')". Val ();
},
Bdttdt:function () {
Return $ ("Input[name= ' Bdttdt ')". Val ();
}
}
}

When an illegal value is entered, click Submit directly to trigger the validation of the entire form.

It is expected that the popup prompt box, "Enter the error, please check."

The actual situation is: Check the first pass, pop confirm the confirmation of the modified prompt box, and then responsible for the teller's check results are displayed. (The teller's text box becomes red after confirming the pop-up window)


Cause Analysis: Use remote asynchronous checksum when clicking Submit, $ ("#ciforg"). Validate (). form (); The method does not wait for the remote method to validate, and returns the result true.

So how to make the remote asynchronous check into a synchronous check, and return the check results in time.

The code is as follows:

{csdn:code:rules:{
mantlr:{//verify the presence of the input teller number
rangelength:[6,6],
Digits:true,
Whether the checksum is repeated
Remote: {
URL: "CIFORG/CHECKMANTLR",//Background handler
Type: "POST",//Data sending method
DataType: "JSON",//Accept data format
Cache:false,
Async:false,
Data: {//To be passed
Mantlr:function () {
Return $ ("Input[name= ' MANTLR ')". Val ();
},
Bdttdt:function () {
Return $ ("Input[name= ' Bdttdt ')". Val ();
}
}
}
}}

The key is to add the properties of the red part of the image above.

Of course you can also use the custom method, in fact using AJAX, set up synchronization to complete the verification.

 jquery.validator.addmethod ("Phonesame",  function (value, element)  {     //use Jquery ajax method to verify that the phone is present          var flag =  1;         $.ajax ({              type: "POST",              url: ' tel.php ',             async:false,                                                //synchronous method, if used asynchronously, flag is always 1              data:{' Tel ':value},              success:  function (msg) {                   if (msg ==  ' yes ') {                       flag = 0;                   }              }         });            if (flag == 0) {              return false;         }else{              return true;          }        },  "sorry number have  Been exist "); &nBsp




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.