Creating Simple jQuery Validation in Registration Form

By Axl on

Validating forms is extremely important in our web development, we need to validate the form such as registration form and contact form or any input form in our site to prevent human errors and malicious value’s and make valid value before inserting in the database.

Early 90’s validation the web forms is complicated to code, it’s because programmers code in pure JavaScript, Today’s validating input fields is very easy because jQuery, you can validation form in easy way by using third party plugin out there and ready to use.

If you wonder on how to validate forms your own script, in this example I would like to share our jquery form validation in registration form using jQuery library.

In this tutorial we will create a simple jquery validation in registration form, that used input fields in real world form and also we create the dynamic date using php loop and after fill in up the form jQuery will validate the valid values after the value is valid it will passed to the php file.

You can view the live demo in this script via button below, also you download the work files in the end of this tutorial.

So let’s get started…

View Demo

1. Creating the Page Template

index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Simple jQuery Validation in Registration Form</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script type="text/javascript" src="js/script.js"></script>
<meta name="robots" content="noindex,nofollow"/>
</head>

<body>
	<div id="wrap"> <!--wrap start-->
    	<div id="wrap2">  <!--wrap2 start-->
       
       	<h2 class="free_account">Create an free account</h2> 
        
    	<form action="process.php" method="post" id="register_form">
        	
                <p class="validate_msg">Please fix the errors below!</p>
                
                <p> <label for="name">First Name</label> <input name="fname" type="text" /> <span class="val_fname"></span> </p> 
                <p> <label for="lname">Last Name</label>  <input name="lname" type="text" />  <span class="val_lname"></span> </p>
                <p> <label for="email">Your Email</label> <input name="email" type="text" /> <span class="val_email"></span> </p>
                <p> <label for="password">Password</label>  <input name="password" type="password" /> <span class="val_pass"></span> </p>
                <p> <label for="repassword">Retype Password</label>  <input name="repassword" type="password" /> <span class="val_pass2"></span> </p>
                <p> <label for="phone">Phone No.</label> <input name="phone" type="text" /> <span class="val_phone"></span> </p>
                
				<p> <label for="birth">Birth Date</label>  
                            	<select name="month">
                    				<option value="">Month</option>
                                    <?php 
										$months = array('1' => 'Jan', '2' => 'Feb', '3' => 'Mar', '4' => 'Apr', '5' => 'May', '6' => 'June', '7' => 'July ', '8' => 'Aug', '9' => 'Sept', '10' => 'Oct', '11' => 'Nov', '12' => 'Dec');
										foreach($months as $m => $month) {
									?>
                                    <option value="<?php echo $m; ?>"><?php echo $month; ?></option>
                                    <?php } ?>
                                </select>
                                <select name="day">
                    				<option value="">Day</option>
                                    <?php for($day = 1; $day < 32; $day++) { ?>
                                    <option value="<?php echo $day; ?>"><?php echo $day; ?></option>
                                    <?php } ?>
                                </select>
                                <select name="year">
                    				<option value="">Year</option>
                                    <?php 
										$year = date("Y");
										for($j = $year; $j > 1949; $j--) { 
									?>
                                    <option value="<?php echo $j; ?>"><?php echo $j; ?></option>
                                    <?php } ?>
                                </select>
                <span class="val_bday"></span> </p>
                
				<p> <label for="gender">Gender</label>  <input name="gender" type="radio" value="m" /> Male <input name="gender" type="radio" value="f" /> Female <span class="val_gen"></span> </p>
				
				<input type="submit" name="submit" value="Register">
        </form>
       
        </div>  <!--wrap2 end-->
    </div>  <!--wrap start-->
</body>
</html>

In the index.php file we used the most common input field in web like in the real world forms such a input fields, drop down and radio buttons. In the birthday field we turn it into the dynamic loop, for the month we use foreach loop to generate dynamic months and the days we loop 1-32 and the year we decrement the year 1949.

2. The stylesheet

style.css

body { 
	font-family: sans-serif;
	font-size:13px;
	background:#CCCCCC;
	color:#444444;
}
p { 
	padding:2px 
}
#wrap { 
	width:820px; 
	padding:20px; 
	margin:20px auto;
	background:#fff;
	border:1px solid #cc;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
div#wrap2 {
    border: 1px solid #CCCCCC;
    margin-bottom: 10px;
    padding:15px;
}
h2.free_account {
    color: #3399FF;
    display: block;
    margin-bottom: 25px;
}
form#register_form label { 
	display:inline-block; /* with block na */
	width:125px;
	font-weight:bold;
}
form#register_form label:after { 
	content:":"
}
form#register_form input[type='text'], input[type='password'] { 
	display:inline-block; /* with block na */
	width:200px;
	border:1px solid #ccc;
	margin:0;
	padding:5px;
}
form#register_form select {
    border: 1px solid #CCCCCC;
    display: inline-block;
    margin: 0;
    padding: 5px 0;
    width: 68px;
}
form#register_form input[name='submit'] { 
	border:1px solid #3399FF;
	background:#3399FF;
	border-radius: 5px;
	margin:10px;
	color:#FFF;
	padding:5px;
	font-weight:bold
}
form#register_form input[name='submit'] { 
	cursor:pointer;
}
p.validate_msg {
    border: 1px solid #FF0000;
    font-weight: bold;
    padding: 10px;
	display:none;
	margin-bottom:25px
}
span.validate  {
	color:#F00;
	padding-left:8px;
	font-style:italic;
}

Our simple style

3. The jQuery script

script.js

jQuery(function($) {
	var validation_holder;
	
	$("form#register_form input[name='submit']").click(function() {
	
	var validation_holder = 0;
	
		var fname 			= $("form#register_form input[name='fname']").val();
		var lname 			= $("form#register_form input[name='lname']").val();
		var email 			= $("form#register_form input[name='email']").val();
		var email_regex 	= /^[\w%_\-.\d]+@[\w.\-]+.[A-Za-z]{2,6}$/; // reg ex email check	
		var password 		= $("form#register_form input[name='password']").val();
		var repassword 		= $("form#register_form input[name='repassword']").val();
		var phone 			= $("form#register_form input[name='phone']").val();
		var phone_regex		= /^[0-9]{4,20}$/; // reg ex phone check	
		var month 			= $("form#register_form select[name='month']").val(); // month
		var day 			= $("form#register_form select[name='day']").val(); // day
		var year 			= $("form#register_form select[name='year']").val(); // year
		var gender 			= $("form#register_form input[name='gender']");
		
		/* validation start */	
		if(fname == "") {
			$("span.val_fname").html("This field is required.").addClass('validate');
			validation_holder = 1;
		} else {
			$("span.val_fname").html("");
			}
		if(lname == "") {
			$("span.val_lname").html("This field is required.").addClass('validate');
			validation_holder = 1;
		} else {
			$("span.val_lname").html("");
			}
		if(email == "") {
			$("span.val_email").html("This field is required.").addClass('validate');
			validation_holder = 1;
		} else {
			if(!email_regex.test(email)){ // if invalid email
				$("span.val_email").html("Invalid Email!").addClass('validate');
				validation_holder = 1;
			} else {
				$("span.val_email").html("");
			}
		}
		if(password == "") {
			$("span.val_pass").html("This field is required.").addClass('validate');
			validation_holder = 1;
		} else {
				$("span.val_pass").html("");
			}
		if(repassword == "") {
			$("span.val_pass2").html("This field is required.").addClass('validate');
			validation_holder = 1;
		} else {
			if(password != repassword) {
				$("span.val_pass2").html("Password does not match!").addClass('validate');
				validation_holder = 1;
			} else {
				$("span.val_pass2").html("");
			}
		}
		if(phone == "") {
			$("span.val_phone").html("This field is required.").addClass('validate');
			validation_holder = 1;
		} else {
			if(!phone_regex.test(phone)){ // if invalid phone
				$("span.val_phone").html("Invalid Phone Number!").addClass('validate');
				validation_holder = 1;
			
			} else {
				$("span.val_phone").html("");
			}
		}
		if((month == "") || (day == "") || (year == "")) {
			$("span.val_bday").html("This field is required.").addClass('validate');
			validation_holder = 1;
		} else {
				$("span.val_bday").html("");
			}
		
		if(gender.is(':checked') == false) {
			$("span.val_gen").html("This field is required.").addClass('validate');
			validation_holder = 1;
		} else {
				$("span.val_gen").html("");
			}
		if(validation_holder == 1) { // if have a field is blank, return false
			$("p.validate_msg").slideDown("fast");
			return false;
		}  validation_holder = 0; // else return true
		/* validation end */	
	}); // click end 

}); // jQuery End

In the script.js file, we set variable validation_holder with default value 0, these control the validating values, in the line 8-19 we getting the value in the fields as we validate email via Regular Expression. The validation process start in line 22, so the common logic is if the value is equal to blank the validation_holder set to 1 and return false else return true the validation_holder set to 0.

4. Process Data

process.php

<?php 
// author: http://axlmulat.com
$fname 		= trim($_POST['fname']); // trim remove white space
$lname 		= trim($_POST['lname']);
$email 		= trim($_POST['email']);
$password 	= trim($_POST['password']);
$phone 		= trim($_POST['phone']);
$birth 		= $_POST['year'].'-'.$_POST['month'].'-'.$_POST['day'];
$gender 	= $_POST['gender'];
// do something. mysql_query
//header("Location: index.php");
//exit();
?>

This process.php file getting the values of the form after they validated, so we use the trim function to remove while space if any, then you can do mysql insert and after inserted the data, redirect to the success page.

Important Notes:

If you use this script for template selling or plugin selling or any kind of selling like website themeforest.net / any theme, plugins selling sites, Don’t include a link like ‘Credit to axlmulat.com’ or any link from axlmulat.com.

Again !!! if you are a TEMPLETE SELLER / PLUGIN SELLER. don’t Credit a link

You can use this script all you want…

Thank you and happy coding…

Done

We’re done, Congratulations you learn how to validate a web form using jquery, you can use and recycle the code in you web projects

Thank you for reading my tutorial. Please recommend and share.

Let’s have a look at what we’ve achieved:

  • Validating the form without third party plugin.
  • We create the dynamic date loop in the field.
  • Simple and working jQuery validation.