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…
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.
