Jquery validation one rule fails should not jump to another rule

问题

I am using jquery validation, I have to implement functionality so that if any rule fails the form should not submit. The work is done validation working fine.

The problem is if multiple rules are failed it is showing error messages in each text box, the failure is propagating to all rules.

I want to achieve a functionality in which if one rule fails it should stop there with error message of that element only.

<form id="myform">
 <label for="firstName">FirstName</label>
 <input class="left" id="fname" name="fname" />
 <br>
 <label for="lastName">LastName</label>
 <input class="left" id="lname" name="lname" />
 <br>
 <label for="fromDate">fromDate</label>
 <input class="left" id="fromDate" name="fromDate" />
 <br>
 <label for="endDate">endDate</label>
 <input class="left" id="endDate" name="endDate" />
 <br>
 <input type="submit" value="Validate!">
 </form>

Rules:

$( "#myform" ).validate({
  rules: {
    fname:"required",
    lname:"required",
    fromDate:"required",
    endDate:"required"
  }
});

This is demonstration of my problem msg-"This field is required" should appear once i.e. for first text box. Error shouldn't propagate to remaining text boxes.

Please respond if any body understands what I want.(This is my demo code.)

回答1:

You can use the custom error handler showErrors, where you only set the first found error in the error list:

showErrors: function(errorMap, errorList) {
    if (errorList.length) {
       this.errorList = [errorList[0]];
    }

    this.defaultShowErrors();
  }

The error list needs to be an array, so that's why the first error is placed inside the [], which defines an array.

So in total you get:

$("#myform").validate({
  rules: {
    fname: "required",
    lname: "required",
    fromDate: "required",
    endDate: "required"
  },
  showErrors: function(errorMap, errorList) {
    if (errorList.length) {
       this.errorList = [errorList[0]];
    }

    this.defaultShowErrors();
  }
});

JsFiddle

Now, if you want the internal validation check stop at its first error. So not only visually not showing the errors, but actually stopping checking once one field is falsy. You can overwrite the internal check function checkForm().

I will simply check if the element is true or false, once false I know at least one field is falsy. So I break the check loop:

validator.checkForm = function() {
  this.prepareForm();
  for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
    if (!this.check(elements[i]))
      return false;
  }
  return this.valid();
};

JsFiddle

Now I want to mind you I am not the creator of this plugin, so I do not fully know if this works accordingly. I would suggest to write your own validation code, to have full control on what you are doing.

来源：https://stackoverflow.com/questions/39746904/jquery-validation-one-rule-fails-should-not-jump-to-another-rule

标签

jquery

jquery-validate