tutorial #6: Validation Plugin

The Validation Plugin allows for customization and simplification of the otherwise straightforward task of validating forms. This demonstration of the Validation Plugin will alert users if they have input valid or invalid information into the form fields.

(Please Note: the Validation Plugin requires jquery.validate.min.js. For more information about this plugin, visit: jqueryvalidation.org )

For this demonstration, you will learn how to build a form using the Validation Plugin, how to build the jQuery code needed and the purpose of each line of code. Also, you will learn how to use the Validation Plugin enhanced form in HTML and CSS.

Below is the demonstration of the Validation Plugin. If you enter invalid information, you will receive a message asking to input the required information. On the other hand, if you enter valid information, you will receive an approval checkmark.

The How-To

HTML

                 
<div id="validate">
          
<form action="#">

<div>
<input name="name" id="name" type="text" placeholder="Your Name" />
</div>

<div>
<input name="email" id="email" type="text" placeholder="Email" />
</div>

<div>
<input name="website" id="website" type="text" placeholder="www.example.com" />
</div> 
     
<div>
<input name="password" id="password" type="password" placeholder="Password" />
</div> 
  
<div>
<input name="passconf" id="passconf" type="password" placeholder="Confirm Password" />
</div>
      
<div>
<button type="submit">Submit</button>
</div>

</form>

</div>

CSS

#validate {
	border-radius: 12px;
    padding: 10px;
}

#validate input  {
    border: thin solid #155a7a;
    border-radius: 5px;
    color: #363636;
    display: block;
    font-family: Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:16px;
    margin-bottom: 25px;
    padding: 15px;
	width:250px;
	display: inline-block;
}

#validate input:focus {
	border: #0A4E63 medium solid;
}

#validate  label {
  display: block;
}

#validate label.valid {
  	background: url("img/checkmark.png") no-repeat scroll center center;
    display: inline-block;
    height: 40px;
    text-indent: -9999px;
    width: 40px;
}

#validate label.error {
	display: inline-block;
    padding-left: 30px;
    padding-top: 20px;
}

#validate  div {
  padding: 5px;
  clear: left;
  width: 100%;
}

#validate form button {
	border-radius: 8px;
}

jQuery

$(document).ready(function(){
//The functions will be executed, once the page is ready.
$('#validate form').validate({
//Selects the form inside the "validate" and calls jquery.validate.min.js
rules: {
//This will sets the rules for the input from users.
name: {
  //The attribute name of the "name" form field.
  required: true
  //Makes sure the form field is correct and filled.
},
email: {
   //The attribute name of the "email" form field.
  required: true,
  email: true
//Makes sure the users enters a valid email address into the form field.
},
website: {
  //The attribute name of the "website" form field.
  url: true
  //Makes sure the users enters a valid URL address into the form field.
},
password: {//The attribute name of the "password" form field.
  minlength: 6,
  //Sets the minimum length for the user's password.  
  required: true
},
passconf: {
//The attribute name of the "Confirm password" form field.
  equalTo: "#password"
//Checks the password against the form to it's correct.
}
},
success: function(label) {
  //Starts a function that inserts labels.
label.text('OK!').addClass('valid');
//Will add labels if the information is correct.
}
});
$('#website').focus(function() {
//When user enters a URL into the "website" form field.
$(this).val('http://');
//This will insert "http://" into the email form field.
});
});//Close.