Validating a login page using JQuery Validation: Demo code

Validating a login form with the JQuery Validation plugin. The fields are first validated when the either fields blur or the form is submitted. Any fields found to have an error are then validated onkeyup.

This is a whittled-down version of top example on the main JQuery example page, with two changes: Instead of being hard-coded into the configuration and error messages, the values are set into variables. And both the password and username are checked for both minimum and maximum lengths.

(Try this out on JSFiddle.)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>jQuery validation login basic example</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta name="viewport" content="width=device-width"/>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
   <script>
      //Configuration
         var minUserLen = 5, maxUserLen = 30;
         var minPassLen = 8, maxPassLen = 4096;
         var usernameMsg = "Username must be between " + minUserLen + " and " +
                           maxUserLen + " characters, inclusive.";
         var passwordMsg = "Password must be between " + minPassLen + " and " +
                           maxPassLen + " characters, inclusive.";
         jQuery.validator.setDefaults({
            debug: true,      //Avoids form submit. Comment when in production.
            success: "valid",
            submitHandler: function() {
               alert("Success! The form was pretend-submitted!");
            }
         });
      $(document).ready(function() {
         // validate signup form on keyup and submit
         $("#signupForm").validate({
            rules: {
               username: {
                  required: true,
                  minlength: minUserLen,
                  maxlength: maxUserLen

               },
               password: {
                  required: true,
                  minlength: minPassLen,
                  maxlength: maxPassLen

               },
            },
            messages: {
               username: {
                  required: "Username required",
                  minlength: usernameMsg,
                  maxlength: usernameMsg
               },
               password: {
                  required: "Password required",
                  minlength: passwordMsg,
                  maxlength: passwordMsg
               }
            }
         });
      });
   </script>
   </head>
<body>
   <p>Validating a login form with the <a href="http://jqueryvalidation.org/">JQuery Validation</a> plugin. The fields are first validated when the form either <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.onblur"><code>onBlur</code></a> or when submitted. Any fields found to have an error are then validated <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.onkeyup"><code>onkeyup</code></a>. This is a whittled-down version of top example on the <a href="http://jqueryvalidation.org/files/demo/">main JQuery example page</a>.</p>

   <form id="signupForm">
      <fieldset>
         <legend>Fake login please</legend>
         <p>
            <label for="username">Username</label>
            <input id="username" name="username" type="text">
         </p>
         <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password">
         </p>
         <p>
            <input class="submit" type="submit" value="Submit">
         </p>
      </fieldset>
   </form>
</html></body>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s