title: jQuery Validate + AJAX username availability check: How to marry them?
body: <p>UPDATE</p>
  
  <hr>
  
  <p>Thanks to <strong>charlietfl's</strong> comments and suggestions (and, at one point ire, lol - apologies for my faux pas), I've finally got the system checking from within Validate, and the form submission is halted when the email is sent. So I guess my question is answered, but if you'll all bear with me for one more moment, there's one last finishing touch that I could use your help with...</p>
  
  <p>In my original vision, in addition to triggering a proper "Email already exists" error, I also populated a second element with some HTML that more completely explained the situation to the user and provided a link to a login form. This second element appeared and disappeared depending on the status of the field. </p>
  
  <p>Is there a way to use the messages/remote section to do this as well?</p>
  
  <p>Here what I have:</p>
  
  <pre><code>$(document).ready(function(){
  $("#signup").validate({
      errorElement: "span",
      errorPlacement: function(error, element) {
          error.appendTo(element.prev());
          //element.prev().replaceWith(error);
      },
      rules: {
          "email": {
              required: true,
              email:true,
              remote: {
                  url: "/ajax/emailcheck.php",
                  type: "post",
              },
          },
          "password": {
              required: true,
              minlength: 8,
          },
          "password-check": {
              required: true,
              minlength: 8,
              passmatch: true,
          },
          "tos": {
              required: true,
              minlength: 6,
          }
      },
      messages: {
          email: {
              required: " is Required",
              email: " is Improperly Formatted",
              remote: " already exists",
              },
  
          },
          password: {
              required: " is Required",
              minlength: " requires at least 8 characters",
          },
          "password-check": {
              required: " is Required",
              minlength: " requires at least 8 characters",
              passmatch: " must match the Passphrase",
          },
          tos: {
              required: " is Required",
              minlength: " requires at least 6 characters",
          },                      
      },
      onkeyup: true,
      onblur: true
  });
  </code></pre>
  
  <p>And, in the ideal, I'd love something like this:</p>
  
  <pre><code>messages: {
  email: {
      required: " is Required",
      email: " is Improperly Formatted",
      remote: " already exists",
      remote: {
          username: function() {
          var emailcheck = $('#email').val();  
          return $('#username_availability_result').html(emailcheck + ' is already in our system. Please &lt;a href="/login.php"&gt;log in here&lt;/a&gt;.');
          },
      },
  },              
  },
  </code></pre>
  
  <p>Thanks again, and in advance, for your own ongoing attention and advice,</p>
  
  <p>Z</p>
  
  <p>ORIGINAL QUESTION</p>
  
  <hr>
  
  <p>I'm using jQuery Validate to run routine validation on a registration form. But one of the features I wanted to add to the form's functionality was an AJAX check to determine if an email address was already in the system. The problem is that the email check function exists <em>outside</em> of the validate function, and so doesn't actually stop the form from submitting when necessary. </p>
  
  <p>Here's my code. (The top 50 lines comprise validation and password matching. The remainder constitutes the AJAX check [which is triggered by the email field's keyup event]).</p>
  
  <pre><code>        // Method adds password matching abilities to the validator
          jQuery.validator.addMethod("passmatch", function(value, element) {
             return $('#password').val() == $('#password-check').val()
          }, "* Passwords should match");
  
          $(document).ready(function(){
              $("#signup").validate({
                  errorElement: "span",
                  errorPlacement: function(error, element) {
                      error.appendTo(element.prev());
                      //element.prev().replaceWith(error);
                  },
                  rules: {
                      "email": {
                          required: true,
                          email:true,
                      },
                      "password": {
                          required: true,
                          minlength: 8,
                      },
                      "password-check": {
                          required: true,
                          minlength: 8,
                          passmatch: true,
                      },
                      "tos": {
                          required: true,
                          minlength: 6,
                      }
                  },
                  messages: {
                      email: {
                          required: " is Required",
                          email: " is Improperly Formatted",
                      },
                      password: {
                          required: " is Required",
                          minlength: " requires at least 8 characters",
                      },
                      "password-check": {
                          required: " is Required",
                          minlength: " requires at least 8 characters",
                          passmatch: " must match the Password"
                      },
                      tos: {
                          required: " is Required",
                          minlength: " requires at least 6 characters",
                      },                      
                  }
              });
  
              //check email availability 
              $('#email').keyup(function(){  
                  check_availability();  
              });  
  
          });               
  
          //function to check username availability  
          function check_availability(){  
  
                  //get the username  
                  var username = $('#email').val();  
  
                  //use ajax to run the check  
                  $.post("/ajax/emailcheck.php", { username: username },  
                      function(result){  
                          //if the result greater than none  
                          if(result &gt; 0 ){  
                              //show that the username is not available  
                              $('#username_availability_result').html(username + ' is already in our system. Please &lt;a href="/login.php"&gt;log in here&lt;/a&gt;.');  
                          }else{  
                              //username available.  
                              //clear any messages
                              $('#username_availability_result').html(''); 
                          }  
                  });  
          }  
  </code></pre>
  
  <p>Is there a way for the check_availability() function to trigger a stop (and a start once it's cleared) so that the form can't be submitted during a state of error? Or can the whole kit and caboodle somehow be integrated into Validate using addMethod (if so, please note that I'm providing availability feedback in a specifically IDed element, not through the same element where other Validate errors appear)?</p>
  
  <p>Thanks in advance for all your help and advice.</p>
  
  <p>Z</p>