jquery validation with ajax call

Question

I am using the jquery validation and i need to validate an email.

I use

    $("#myForm").validate({
     rules: 
      email: {
       required: true,
       email: true
      }
})

SO FAR so good. The problem is that i need to make an ajax call to verify if given email already exist.If exist display message "This email already exits.Please selecte other".

Can anyone help me implement this.

Answer 1

remote: "/some/remote/path"

That path will be passed the value of the field in a $_GET. so.. what actually gets called in your case would be:

/some/remote/path?email=someemailuriencoded

Have the server side code return just the text true or false.

Then the corresponding message also named remote.

remote: "The corresponding email already exists"

My code for something similar:

$("#password_reset").validate({
  rules: { 
    email: { required: true, email: true, minlength: 6, remote: "/ajax/password/check_email" }
  }, 
  messages: { 
    email: { required: "Please enter a valid email address", minlength: "Please enter a valid email address", email: "Please enter a valid email address", remote: "This email is not registered" }
  }, 
  onkeyup: false,
  onblur: true
});

The corresponding server side code in php:

$email_exists = $db->prows('SELECT user_id FROM users WHERE email = ? LIMIT 1', 's' , $_GET['email'] );
if ( $email_exists ) { echo 'true'; } else { echo 'false'; }
exit;

Of course that's using my database abstraction stuff, but you get it.

Answer 2

Whats your server language? PHP or ASP?

This is the jQuery part:

  $.ajax({
    type: "POST",
    url: "YourWebserviceOrWhatEver",
    data: "{'Email':'[email protected]'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      if(msg.EmailExists){
        //Email exists
        alert("This email already exits.Please selecte other");
      }
      else {
       //Email doesn't exist yet
       doSomething();
      }
    }
  });

Answer 3

Darens solution work great.

The thing is that i want to use remote with another field but in this case i need to pass more parameters in the remote script

code: { required: true, remote: "dispatch.php?dbID="+$("#dbID").val()" }

i tried but its not working

Can anyone know if i can pass extra parameteres in remote script

Thanks

Answer 4

Well, this works for me...

 $('[id$=txtEmail]').rules("add", { required: true, email: true,
         remote:function(){
              var checkit={
                  type: "POST",
                  url:  WebServicePathComplete+"VerifyEmail",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  data: "{'email':'" +$('[id$=txtEmail]').val() + "'}"
              };
              return checkit;
         }
  });

note that I have a input with the id 'txtMail'