Simple jquery form validation And password check

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

User Form

The Same Form With Validation

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

Setup Instructions for jquery form validation and password check

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 for the simple jquery form validation and password check

<!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