jquery Validate component causes Form onsubmit event execution twice

Source: Internet
Author: User

This is one of the problems encountered in the work today. Because the business needs to add a new check logic when the original form is submitted.

The original logic is as follows (the code is Simplified):

When a form is submitted, the check method is used to verify

<formonsubmit="return check ();"> method Code: function Check () {      if(...) {alert ("xxx");           return false;     }} because a new logic is added, I have added a new method that adjusts the structure of the code:<form onsubmit="return Newcheck ();"> method Code: functionNewcheck () { if(!check ()) { return  false;} if(!mycheck () { return  false;} return  true;} functionMyCheck () { if(...) {alert ("xxx");           return  false;}}But when I tested it, the hint appeared two times. After confirmation, the method was executed two times (it took some effort to confirm and understand the reason, and went online to find some relevant information, but all ineffective, solve the problem are similar, from the unknown to explore various possibilities). Later thought that the page uses the jquery validate component to do the check, whether it is related to this, was also suspected. Search for related content find the Jquery.validate Chinese API, which has two fields: the cause of the problem: onsubmit Boolean Default: True whether validation is committed. Well, that's what's causing it.(I've just read it myself again, and I think this approach should be to call validate when the form is being submitted, rather than executing the OnSubmit method when calling validate.) Anyway, I think query validate still called onsubmit)Workaround: Submithandler: The function that is run after validation is added with the form-submitted function, otherwise the form will not be submitted. (The API is followed by an additional code snippet like the following)$ (". Selector"). Validate ({Submithandler: function(form) {$ (form). Ajaxsubmit ();              }           })All right, copy's coming in. OK, the form is not submitted (because the above code has a problem, can be executed in time, it may also appear below the dead loop problem) ... Continue to find the usage of Submithandler. found:jquery Validate Submithandler Commit causes a dead loop. It's a good write. Just bring it over. Delete the onsubmit in the form form, and then Nega in the jquery Validate related code:Submithandler: function(form) {            if(Newcheck ()) {form.submit ();            }         }problem solving. This is a process of solving an unknown problem and heuristic from every possible point of view. At first I wondered where the repetition was? Then suspect the top and bottom of the page two save button reason? Again to run the line code to re-test the problem, and it is strange that when good time is bad, sometimes executed once, sometimes two times. To this still strange why return false, I write code will execute two times, and the original code executes once, here is just a layer of calls. The idea code in the order is blocked at the first false time. Harvest 2: jquery Validate calls the OnSubmit method by default, causing this method to be called two times, and when the method returns false, because it returns, it is difficult to find that the checksum is executed two times when the pass is passed. The jquery form submission triggers validate execution, so in validate, if the form submission in jquery is a dead loop (verified), the DOM submission method should be used.

jquery Validate component causes Form onsubmit event execution twice

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.