Perfect Javascript Form Validation using Regular Expressions

I had designed a perfect form validation using javascript regular expression. Simple code and works perfect in all conditions. It’s very useful and supporting all the web browsers

Perfect Javascript Form Validation using Regular Expressions
Perfect Javascript Form Validation using Regular Expressions

Jquery Validation with Regular Expressions
Server Side Form Validation using Regular Expressions

Name:
Alphabets, numbers and space(‘ ‘) no special characters min 3 and max 20 characters.

var ck_name = /^[A-Za-z0-9 ]{3,20}$/;

Email
Standard email address

var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

UserId
Supports alphabets and numbers no special characters except underscore(‘_’) min 3 and max 20 characters.

var ck_username = /^[A-Za-z0-9_]{3,20}$/;

Phone:

Numbers only 10 digits.

var ck_phone = /^[0-9]{10}$/;

Password
Password supports special characters and here min length 6 max 20 charters.

var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;

JavaScript Code:
You have to include this code within the tag HEAD of the page.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var ck_name = /^[A-Za-z0-9 ]{3,20}$/;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i 
var ck_username = /^[A-Za-z0-9_]{1,20}$/;
var ck_phone = /^[0-9]{10}$/;
var ck_password =  /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;



function validate(form){
var name = form.name.value;
var email = form.email.value;
var username = form.username.value;
var password = form.password.value;
var phone = form.phone.value;
var gender = form.gender.value;
  
  
 var errors = [];
 
 if (!ck_name.test(name)) {
  errors[errors.length] = "You valid Name .";
 }
  
 if (!ck_email.test(email)) {
  errors[errors.length] = "You must enter a valid email address.";
 }
 if (!ck_username.test(username)) {
  errors[errors.length] = "You valid UserName no special char .";
 }

 if (!ck_password.test(password)) {
  errors[errors.length] = "You must enter a valid Password min 6 char.";
 }
 if (!ck_phone.test(phone)) {
  errors[errors.length] = "You must enter a valid phone";
 }
 if (gender==0) {
  errors[errors.length] = "Select Gender";
 }
 
 
 if (errors.length > 0) {
  reportErrors(errors);
  return false;
 }
 
 return true;
}

function reportErrors(errors){
 var msg = "Please Enter Valide Data...\n";
 for (var i = 0; i<errors.length; i++) {
  var numError = i + 1;
  msg += "\n" + numError + ". " + errors[i];
 }
 alert(msg);
}
</script>

HTML Code
You have to modify action=”#”

<form autocomplete="off" enctype="multipart/form-data" method="post" action="thankyou.html" onSubmit="return validate(this);" name="form">
    <div class="info" style="padding-left:20px">
      <h2>Registration Form</h2>
      
    </div>
    <ul>
      <li id="foli1" class=" ">
        <label class="desc" id="title1" for="Field1"> Full Name </label>
        <div>
          <input id="name" name="name" type="text" class="field text medium" value="" maxlength="255" tabindex="1"/>
        </div>
      </li>
      <li id="foli2" class="">
        <label class="desc" id="title2" for="Field2"> Email </label>
        <div>
          <input id="email" name="email" type="text" class="field text medium" value="" maxlength="255" tabindex="2"/>
        </div>
      </li>
      <li id="foli3" class="">
        <label class="desc" id="title3" for="Field3"> User-ID </label>
        <div>
          <input id="username" name="username" type="text" class="field text medium" value="" maxlength="255" tabindex="3" />
        </div>
      </li>
      <li id="foli4" class="">
        <label class="desc" id="title4" for="Field4"> Password </label>
        <div>
          <input id="password" name="password" type="password" class="field text medium" value="" maxlength="255" tabindex="4"/>
        </div>
      </li>
       <li id="foli4" class="">
        <label class="desc" id="title4" for="Field4"> Phone </label>
        <div>
          <input id="phone" name="phone" type="text" class="field text medium" value="" maxlength="255" tabindex="4"/>
        </div>
      </li>
      
      <li id="foli6" class="">
        <label class="desc" id="title6" for="Field6"> Gender </label>
        <div>
          <select id="gender" name="gender" class="field select medium" tabindex="5">
            <option value="0">Gender</option>
            <option value="1">Male</option>
            <option value="2">Female</option>
          </select>
        </div>
      </li>
      <li id="foli15" class=""></li>
      <li class="buttons">
        <input  type="submit" value="Submit" style=" background:#0060a1; color:#FFFFFF; font-size:14px; border:1px solid #0060a1"/>
      </li>
    </ul>
  </form>

 

 

Please follow and like us:

Add a Comment