jQuery Ajax Validation Use the Remote Rule

Key Takeaways

• The jQuery validation plugin has a rule called “remote” that allows for an Ajax request to be made during validation, eliminating the need for a custom rule with an Ajax call, thereby saving time.
• The “remote” rule is particularly useful for validating fields against server data, such as checking if a username or email is already registered. It sends an Ajax request to the server with the field value and awaits the server’s response to determine if the value is valid.
• Although the “remote” rule is designed to validate one field at a time, it can handle dynamic data or fields that change, as it sends an Ajax request every time the field value changes and loses focus. However, it’s important to note that this could result in a large number of Ajax requests if the field value changes frequently.

I only just found out that the jQuery validation plugins has a validation rule called “remote” which can be used to make an ajax request instead of specifying a custom rule which has an ajax call it in. This will save you heaps of time with those custom validation rules. Basic jQuery Form Validation Tutorial (2mins).

Example: Checking if a users email is already registered.

The new remote method way

As you can see to pass through data you can simply use the key pair syntax so the request sent below the data is “&emails=email@jquery4u.com”. The return values for your backend script is either json encoded true for a validation pass or html msg for validation fail.

//VALIDATE USER EMAIL
$(':input[name="uAcc"]').rules("add",
{
  "remote" :
  {
      url: 'validateEmail.php',
      type: "post",
      data:
      {
          emails: function()
          {
              return $('#register-form :input[name="email"]').val();
          }
      }
  }
});

The old add custom method way

//VALIDATE USER EMAIL
$.validator.addMethod("validateUserEmail", function(value, element)
{
    var inputElem = $('#register-form :input[name="email"]'),
        data = { "emails" : inputElem.val() },
        eReport = ''; //error report
    $.ajax(
    {
        type: "POST",
        url: validateEmail.php,
        dataType: "json",
        data: data,
        success: function(data)
        {
            if (data !== 'true')
            {
              return '
This email address is already registered.
';
            }
            else
            {
               return true;
            }
        },
        error: function(xhr, textStatus, errorThrown)
        {
            alert('ajax loading error... ... '+url + query);
            return false;
        }
    });
}, '');
$(':input[name="email"]').rules("add", { "validateUserEmail" : true} );

Backend PHP Script

< ?php
/* check if email is already registered */
//connect to db using mysqli
if (!empty($_POST['email']))
{
    $email = $mysqli->real_escape_string($_POST['email']);
    $query = "SELECT ID FROM users WHERE user_email = '{$email}' LIMIT 1;";
    $results = $mysqli->query($query);
    if($results->num_rows == 0)
    {
        echo "true";  //good to register
    }
    else
    {
        echo "false"; //already registered
    }
}
else
{
    echo "false"; //invalid post var
}
?>

Another Example to help

/* register script */
(function($,W,D,undefined)
{
    $(D).ready(function()
    {
         //form validation rules
         $("#register-form").validate({
             rules:
             {
                email:
                {
                    required: true,
                    email: true,
                    "remote":
                    {
                      url: 'validateEmail.php',
                      type: "post",
                      data:
                      {
                          email: function()
                          {
                              return $('#register-form :input[name="email"]').val();
                          }
                      }
                    }
                },
                name:
                {
                    required: true,
                    minlength: 3
                },
                password:
                {
                    required: true,
                    minlength: 8
                },
                password_repeat:
                {
                    required: true,
                    equalTo: password,
                    minlength: 8
                }
             },
             messages:
             {
                 email:
                 {
                    required: "Please enter your email address.",
                    email: "Please enter a valid email address.",
                    remote: jQuery.validator.format("{0} is already taken.")
                 },
                 name: "Please enter your name.",
                 password: "Please enter a password.",
                 password_repeat: "Passwords must match."
             },
             submitHandler: function(form)
             {
                form.submit();
             }
         });
    });
})(jQuery, window, document);

Stopping remote validation as you type

By default the validation plugin will send off an ajax request for a remote rule every key you press causing too many ajax requests being sent to validate fields. One way to disable this is to deactivate the onkeyup validation so that the remote rule is only validated via ajax once you have finished typing into the input.

$("#register-form").validate({
   onkeyup: false //turn off auto validate whilst typing
});

Frequently Asked Questions (FAQs) about jQuery AJAX Validation Remote Rule