title: Jquery validation rules, after submit, checking "retype-password" first (only if we type mismacth password in both fields & other fields are empty)
body: <p><a href="https://i.stack.imgur.com/DBsYn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DBsYn.png" alt="enter image description here"></a>I am using "jquery validation rules" </p>
  
  <p><strong>my jquery validation rules working fine during blur &amp; tab.. but problem is.. after click on submit, its giving first preference to check password &amp; confirm password.. then it goes to validate another fields.. how can i solve this?</strong></p>
  
  <p><strong>screenshot is of during on click of submit button.. after clicking on submit.. its giving first preference to confirm-password check instead of sequencial check.. why its happening</strong> </p>
  
  <p><strong>after click on submit.. it should validate from top to bottom fields.. but its validating confirm-password field first</strong></p>
  
  <p>for form validation, but during validation check its checking "retype-password" means "equalTo" attribute first (only if we type mismacth password in both fields &amp; other fields are empty)</p>
  
  <p>Its checking "retype-password" first.. then checks other fields..</p>
  
  <p>I want to validation checking preferences as per form field positions</p>
  
  <p>You can see the issue in screenshot clearly.. "jquery validation rules" checking "retype-password" first (only if we type mismacth password in both fields &amp; other fields are empty).. during that its not showing other validation error messages. If both password fields matches then its showing validation error messages for remaining form fields.</p>
  
  <p>My Code Snippet:</p>
  
  <pre><code>&lt;script&gt;
  
    $(document).ready(function () {
  
      jQuery.validator.addMethod("lettersonly", function(value, element) {
          return this.optional(element) || /^[a-z]+$/i.test(value);
        }, "Letters only please");
  
      $('#signup').validate({
          onblur: true,
          onkeyup: false,
          onfocusout: function(element) {
            this.element(element);
          },
          rules: {
              "first_name": {
                required: {
                      depends:function(){
                          $(this).val($.trim($(this).val()));
                          return true;
                      }
                },
                maxlength: 15,
                lettersonly: true
              },
              "last_name": {
                required: {
                      depends:function(){
                          $(this).val($.trim($(this).val()));
                          return true;
                      }
                },
                maxlength: 15,
                lettersonly: true
              },
              "mobile_no": {
                required: {
                      depends:function(){
                          $(this).val($.trim($(this).val()));
                          return true;
                      }
                },
                minlength: 10,
                maxlength: 10,
                digits: true
              },
              "email": {
                required: {
                      depends:function(){
                          $(this).val($.trim($(this).val()));
                          return true;
                      }
                },
                email: true
              },
              "password": { 
                required: true,
                minlength: 4,
                maxlength: 4,
                digits: true
              },
              "conf_password": {
                required: true,
                equalTo: "#mainpassword"
              }
          },
          messages: {
              "first_name": {
                required: "First Name is required",
                maxlength: "First Name should be less than 15 characters"
              },
              "last_name": {
                required: "Last Name is required",
                maxlength: "First Name should be less than 15 characters"
              },
              "mobile_no": {
                required: "Mobile No is required",
                minlength: "Mobile No should be a 10-digit number",
                maxlength: "Mobile No should be a 10-digit number",
                digits: "Mobile No should contain only numbers"
              },
              "email": {
                required: "Email is required",
                email: "Invalid email Id"
              },
              "password": {
                required: "Password is required",
                minlength: "Password should be a 4-digit number",
                maxlength: "Password should be a 4-digit number",
                digits: "Password should contain only numbers"
              },
              "conf_password": {
                required: "Confirm Password is required",
                equalTo: "Password mismatch"
              }
          },
  
          invalidHandler: function(form, validator) {
              var errors = validator.numberOfInvalids();
              if (errors) {
                  $("html, body").animate({
                      scrollTop:  $(validator.errorList[0].element).offset().top-100
                  }, 500);
              }
          }
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>please suggest me changes to avoid this issue..</p>
  
  <p>(in screenshot, just showing some part of form)</p>