Simple jquery form validation with password checker and shaker

Simple jquery form validation with password checker and shaker

Simple form validation and password checker

This tutorial will show you how to setup front-end form validation using jQuery in just a few minutes. I’ve kept this tutorial very basic with simple clear instructions so that anyone can implement some validation on their webpage forms. There is a live demo and also a complete download package at the end of the post.

View Demo Download Code

Example: User Registration Form

preview1

The Same Form With Validation

This is what your form will look like when a user tries to submit an empty form.
preview2

Setup Instructions

Step 1 – Include the latest version of the jQuery Library.

Or use the hotlink welcome file:

//hosted by Microsoft Ajax CDN
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Step 2 – Add the following JavaScript validation rules to your webpage (or indlude as seperate js include).

The code below contains the input field validation rules for the form and also includes a direct submit handler (works for mutiple forms on same page).

$(document).ready(function(){

 $('.submitForm').on('click', function() {

 var err = [];

 var email = $('#email').val();

 $('.regPage1').find('.error').removeClass('error');

 $('.regPage1 .required').each(function(n,element) {

 var d = $(this).val();

 var t = $(this).attr('type');

 if (d == '' && t != undefined){

 $(this).addClass('error');

 err.push(n);

 }

 });



 $('.checkContainer span.crossChecks').each(function() {

 if ($(this).hasClass('glyphicon-remove')) {

 err.push('new-passwd');

 $('#new-passwd').addClass('error');

 $('#new-passwd-2').addClass('error');

 }

 });



 var pwdVal = $('#new-passwd').val();

 if (

 $('#new-passwd').val() != $('#new-passwd-2').val() ||

 (!!pwdVal.length && pwdVal.length < 8)

 ) {

 $('.passwordMatchText').show();

 err.push('#new-passwd');

 } else $('.passwordMatchText').hide();

 console.log(err.length);

 if (err.length > 0) {

 $('#errorText').css('display', 'block');

 shakeOnError();

 } else {

 $('#errorText').css('display', 'none');

 }

 });// $('.submitForm').on('click')

 bindCheckPassword();

 });



 function shakeOnError() {

 var duration = 80;

 var offset = 40;



 $('body').find('form').animate({marginLeft:('-='+ offset)}, duration,function(){

 $(this).animate({marginLeft:('+=' + offset*2)}, duration, function(){

 $(this).animate({marginLeft:('-=' + offset*2)}, duration, function(){

 $(this).animate({marginLeft:('+='+ offset)}, duration);

 });

 });

 });

 }// shakeOnError()



 function bindCheckPassword() {

 $('#new-passwd-2').off('keyup keypress').on('keyup keypress', function (e) {

 // console.log($(this).val());

 $('.checkContainer').css('display', 'block');

 validatePassword($(this).val());

 });

 $('#new-passwd').off('keyup keypress').on('keyup keypress', function (e) {

 $('.checkContainer').css('display', 'block');

 validatePassword($(this).val());

 $('.passwordMatchText').hide();

 });



 $('#email, #fname, #lname, #cname, #job-title').on('focus', function (e) {

 $('.checkContainer').css('display', 'none');

 });

 $('#new-passwd, #new-passwd-2').on('focus', function (e) {

 $('.checkContainer').css('display', 'block');

 });

 }



 function validatePassword(password) {

 var error = "";

 var illegalChars = /[\W_]/; // allow only letters and numbers

 var pwdlower = password.toLowerCase();

 if(pwdlower.indexOf('gartner') > -1){

 alert("You can not use the word 'Gartner' in your password. \n Please try again.");

 return false;

 }



 re = /[a-z]/;

 if (!re.test(password)) {

 error = "Password must contain one lowercase letter\n";

 console.log(error);

 $('.cross1').removeClass('glyphicon-ok').addClass('glyphicon-remove');

 }else{

 $('.cross1').removeClass('glyphicon-remove').addClass('glyphicon-ok');

 }



 re = /[A-Z]/;

 if (!re.test(password)) {

 error = "Password must contain one uppercase letter\n";

 console.log(error);

 $('.cross2').removeClass('glyphicon-ok').addClass('glyphicon-remove');

 }else{

 $('.cross2').removeClass('glyphicon-remove').addClass('glyphicon-ok');

 }



 if ( (password.search(/[a-zA-Z]+/)==-1) || (password.search(/[0-9]+/)==-1) ) {

 error = "The password must contain at least one numeral.\n";

 console.log(error);

 $('.cross3').removeClass('glyphicon-ok').addClass('glyphicon-remove');

 }else{

 $('.cross3').removeClass('glyphicon-remove').addClass('glyphicon-ok');

 }



 re = /[!@#$%^&*]/;

 if (!re.test(password)) {

 error = "Password must contain one special character\n";

 console.log(error);

 $('.cross4').removeClass('glyphicon-ok').addClass('glyphicon-remove');

 }else{

 $('.cross4').removeClass('glyphicon-remove').addClass('glyphicon-ok');

 }



 if ((password.length < 8) || (password.length > 40)) {

 error = "The password is the wrong length. \n";

 console.log(error);

 $('.cross5').removeClass('glyphicon-ok').addClass('glyphicon-remove');

 }else{

 $('.cross5').removeClass('glyphicon-remove').addClass('glyphicon-ok');

 }



 if($('#new-passwd').val() != $('#new-passwd-2').val()){

 $('.passwordMatchText').show();

 }else{

 $('.passwordMatchText').hide();

 }



 return true;

 }

Step 3 – Add the HTML for the form and some styles.

<!DOCTYPE html>

<!--[if IE 9]> <html lang=en class=ie9> <![endif]-->

<!--[if !IE]><!-->

<html lang=en>

<!--<![endif]-->

<head>

<meta charset=utf-8>

<title>Form Validation Test</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" href="form.css">

</head>

<body class=front>



<form id="user-create" method="POST">



 <h1 class="condensed bold">Create Your Account</h1>



 <div class="errorText" id="errorText">Please fill in the required fields highlighted below.</div>

 <div class="regPage1">

 <div>

 <label>My new account</label>



 <span class="pull-right hint">*Required</span>

 </div>

 <div class="col-xs-12 divRow">

 <div class="controls">

 <input class="new-reg sign-in-id required form-control" data-validation-engine="validate[required,custom[email],ajax[validateEmail]]" id="email" name="email" placeholder="Enter your employer-issued e-mail address*" type="email">

 </div>

 </div>



 <div class="col-xs-12 passwordMatchText" id="passwordMatchText">Invalid Password(s) or they do not match. Please try again.</div>



 <div class="col-xs-12 divRow">

 <div class="controls">

 <input class="required form-control" data-validation-engine="validate[required,custom[oneLetterNumberSymbolUpperLower],custom[notGartner],minSize[8],maxSize[40]]" id="new-passwd" name="new-passwd" placeholder="Enter a new password.*" type="password">

 </div>

 </div>



 <div class="col-xs-12">

 <!--p class="hint pwdTips col-xs-12" th:text="#{public-reg-text15}"></p -->

 <div class="col-xs-12 col-sm-6 col-md-4 checkContainer">

 <span class="cross1 crossChecks glyphicon glyphicon-remove"></span>&nbsp;&nbsp;

 <span class="hint pwdhint">1 lowercase character</span>

 </div>

 <div class="col-xs-12 col-sm-6 col-md-4 checkContainer">

 <span class="cross2 crossChecks glyphicon glyphicon-remove"></span>&nbsp;&nbsp;

 <span class="hint pwdhint">1 uppercase character</span>

 </div>

 <div class="col-xs-12 col-sm-6 col-md-4 checkContainer">

 <span class="cross3 crossChecks glyphicon glyphicon-remove"></span>&nbsp;&nbsp;

 <span class="hint pwdhint">1 number</span>

 </div>



 <div class="col-xs-12 col-sm-6 col-md-4 checkContainer">

 <span class="cross4 crossChecks glyphicon glyphicon-remove"></span>&nbsp;&nbsp;

 <span class="hint pwdhint">1 special character</span>

 </div>

 <div class="col-xs-12 col-sm-6 col-md-4 checkContainer">

 <span class="cross5 crossChecks glyphicon glyphicon-remove"></span>&nbsp;&nbsp;

 <span class="hint pwdhint">8 characters minimum</span>

 </div>

 </div>



 <div class="col-xs-12 divRow">

 <div class="controls">

 <input class="required form-control" data-validation-engine="validate[required,custom[oneLetterNumberSymbolUpperLower],minSize[8],maxSize[40],equals[new-passwd]]" id="new-passwd-2" name="new-passwd-2" placeholder="Re-enter your new password.*" type="password">

 </div>

 </div>



 <div class="col-xs-12 divRow">

 <div class="controls">

 <input class="required form-control" data-validation-engine="validate[required]" id="fname" name="fname" placeholder="Enter your first name*" type="text">

 </div>

 </div>



 <div class="col-xs-12 divRow">

 <div class="controls">

 <input class="required form-control" data-validation-engine="validate[required]" id="lname" name="lname" placeholder="Enter your last name*" type="text">

 </div>

 </div>

 <div class="col-xs-12 divRow">

 <div class="btn pull-right submitForm">

 Submit <span class="glyphicon glyphicon-menu-right"></span>

 </div>

 </div>

 <div class="clearfix"></div>

 </div>

</form>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="form.js"></script>

</body>

</html>

 

Step 4 - Here are some optional CSS styles, which I used for the demo.

 h1 {

 color: green;

 font-size: 28px;

 line-height: 33px;

 font-weight: 400;

 padding-top: 20px;

 text-align: center;

 margin-top: 10px;

 font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

 font-weight: 100;

 }

 .errorText, .emailMatchText, .passwordMatchText {

 padding: 5px;

 font-weight: 700;

 background: #d0021b;

 color: #fff;

 font-size: 17px;

 margin-bottom: 5px;

 display: none;

 }

 .hint {

 color: #9B9B9B !important;

 font-size: 13px;

 }

 .divRow {

 padding-left: 0px;

 padding-right: 0px;

 padding-bottom: 10px;

 }

 .btn {

 background-color: green;

 color: #fff !important;

 padding: 15px;

 font-size: 15px;

 /* padding-bottom: 45px; */

 padding-left: 50px;

 padding-right: 50px;

 font-weight: 700;

 }

 .checkContainer {

 display: none;

 }

 .glyphicon-remove {

 color: #d0021b;

 font-size: 17px;

 }

 .glyphicon-ok {

 color: lightgreen;

 font-size: 17px;

 }

 form {

 border-radius: 0 0 6px 6px;

 padding-left: 60px;

 padding-right: 60px;

 padding-top: 44px;

 padding-bottom: 172px;

 height: auto;

 overflow: hidden;

 background-color: #fff;

 border-radius: 4px;

 box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);

 padding-bottom: 20px;

 width: 50%;

 margin: 75px auto;

 }

 .error {

 border: 1px solid #d0021b;

 }

That’s it your done! You are all set. If you like the post please share or leave a comment

View Live Demo | Download Source Code Package

 

No Comments Yet.

Leave a comment