jQuery validate plug-in submitHandler submission causes infinite loop solution_jquery

The example in this article describes the solution to the infinite loop caused by the jQuery validate plug-in submitHandler submission. Share it with everyone for your reference, the details are as follows:

There is no functional difference between the submission form.submit(); of the dom object and the submission $('').submit(); of the jquery object. But if you use the jquery validate plug-in, there will be a big difference between the two when submitting. When $('').submit(); is submitted, jquery validate will perform verification. If $('').submit(); is written in submitHandler, it will cause an infinite loop, but form.submit(); will not.

This problem is a small one. If you don’t pay attention or you are used to writing, it is easy to make mistakes; and when you make mistakes, it is difficult to find them. It took me nearly two hours to find the reason.

1. Let’s briefly talk about dom objects and jquery objects

dom object, you have to use js writing method to operate the tags in the page. As for jquery objects, you have to use jquery syntax to operate.

Converting a dom object into a jquery object is also very simple, just add $(), and then you can use jquery syntax to operate the tags on the page. I think this is what everyone uses the most. Take a look at an example.

$('input[name^="hour"]').each(function(index){
  this.value=index; //this是dom对像,js写法
});
$('input[name^="hour"]').each(function(index){
  $(this).val(index); //$(this)是jquery对像，jquery写法
});

2. jquery validate infinite loop program

$("#product_form").validate({
  focusInvalid:false,
  submitHandler: function(form){
    $('.submit').submit();
  }
});

Correct writing,

$("#product_form").validate({
  focusInvalid:false,
  submitHandler: function(form){
    form.submit();
  }
});

When an infinite loop occurs, the browser will continue to load until the browser hangs. At this time, you can add an alert, and you will know that validate is constantly verifying in a loop. Personally, I think that although it is a small problem, it is difficult to think of it.

Readers who are interested in more content related to jQuery plug-ins can check out the special topic of this site: "Summary of common jQuery plug-ins and usage"

I hope this article will be helpful to everyone in jQuery programming.