title: Why is this jQuery validate working wrongly?
body: <p>I have two email fields: email1 &amp; email2. I want both of them to be distinct. For some reasons, I am keeping email1 as readonly and email2 as editable. Below is my code-</p>
  
  <p>My custom validator is as follows - </p>
  
  <pre><code>$.validator.addMethod("email_not_same", function(value, element) {
    return $('#email1').val() != $('#email2').val();
  }, "Both emails should not be same");  
  </code></pre>
  
  <p>My rules are as follows - </p>
  
  <pre><code> email1: {
      required: true,
      email: true,
    },
    email2: {
      email: true,
      email_not_same: true,
    },
  </code></pre>
  
  <p>My html code is as follows:</p>
  
  <pre><code>&lt;div class="form-group col-md-12"&gt;
      &lt;label&gt;&lt;strong&gt;Emails : &lt;/strong&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-group col-md-6"&gt;
      &lt;input class="form-control" name="email1" placeholder="Email 1" type="email"&gt;
  &lt;/div&gt;
  &lt;div class="form-group col-md-6"&gt;
      &lt;input class="form-control" name="email2" placeholder="Email 2" type="email"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I enter both email addresses same; it shows the message according to my rule. However, after that when I change my email2, it still shows the error message. Please help.</p>