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

One thought on “Validating a login page using JQuery Validation: Demo code

  1. Frederica Hackmeyer

    This website is completely awesome. I’ve researched these details a whole lot
    and I realised that is good written, easy to comprehend. I congratulate
    you for this article that I am going to recommend to people
    around. I request you to recommend the gpa-calculator.co page where each university student or scholar can calculate results grade point average levels.
    Have a great day!

    Reply

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s