Complete Registration Form With Javascript Validation In PHP

Complete Registration Form With Javascript Validation In PHP

Hello Friends. In this tutorial we learn how to create a complete registration form with Javascript validation.

Important for you: Complete Registration Form With Jquery Validation In PHP

We will use onsubmit javascript event to validate form data before submitting it. Inside onsubmit javascript event we will use validate function. If validate function return false value then form will not submit otherwise form will submit.

STEP 1:

Create index.php file and copy paste the following code inside it.

[code]

<script type="text/javascript" src="main.js"></script>

<center>Registration form validation using jQuery</center><form id="form_submission_ajax" action="" method="post">
<table class="form-table">
<tbody>
<tr>
<td><label>Firstname:</label></td>
<td><input id="f_name" name="f_name" type="text" /></td>
</tr>
<tr>
<td></td>
<td id="f_name_error" class="error"></td>
</tr>
<tr>
<td><label>Lastname:</label></td>
<td><input id="l_name" name="l_name" type="text" /></td>
</tr>
<tr>
<td></td>
<td id="l_name_error" class="error"></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input id="email" name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td id="email_error" class="error"></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input id="password" name="password" type="password" /></td>
</tr>
<tr>
<td></td>
<td id="password_error" class="error"></td>
</tr>
<tr>
<td><label>Retype Password:</label></td>
<td><input id="re_password" name="re_password" type="password" /></td>
</tr>
<tr>
<td></td>
<td id="re_password_error" class="error"></td>
</tr>
<tr>
<td><label>Gender:</label></td>
<td><input id="gender" checked="checked" name="gender" type="radio" value="male" />Male
<input id="gender" name="gender" type="radio" value="female" />Female</td>
</tr>
<tr>
<td></td>
<td id="gender_error"></td>
</tr>
<tr>
<td><label>Known Language:</label></td>
<td><input class="language" name="language[]" type="checkbox" value="hindi" />Hindi
<input class="language" name="language[]" type="checkbox" value="english" />English
<input class="language" name="language[]" type="checkbox" value="gujarati" />Gujarati</td>
</tr>
<tr>
<td></td>
<td id="language_error" class="error"></td>
</tr>
<tr>
<td><label>Country:</label></td>
<td><select id="country" name="country">
<option value="">Select Country</option>
<option value="IN">India</option>
<option value="UK">United Kingdom</option>
<option value="US">United State</option>
</select></td>
</tr>
<tr>
<td></td>
<td id="country_error" class="error"></td>
</tr>
<tr>
<td><label>Phone No:</label></td>
<td><input id="phone" name="phone" type="telephone" /></td>
</tr>
<tr>
<td></td>
<td id="phone_error" class="error"></td>
</tr>
<tr>
<td></td>
<td><input name="submit" type="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</form> 
[/code]

STEP 2:

Next create a main.js file for validation of the registration form.

[code]
function phoneNumberValidation(phoneNumber)
{
var phoneno = /^\d{10}$/;
if(phoneNumber.match(phoneno))
{
return true;
}
else
{
var div = document.getElementById(‘phone_error’);
div.innerHTML = "* Enter valid 10 digit number like this 9876543210.";
return false;
}
}

function validate(){
var valid = true;
var f_name = document.getElementById(‘f_name’).value;
var l_name = document.getElementById(‘l_name’).value;
var email = document.getElementById(’email’).value;
var password = document.getElementById(‘password’).value;
var retype_password = document.getElementById(‘re_password’).value;
var gender = document.getElementById(‘gender’).value;
var language = document.getElementsByClassName(‘language’);
var checkedData=[];
var numOfCheckbox = language.length;
var getCheckboxData;
for(i=0; i<numOfCheckbox;i++)
{
if(language[i].checked==true)
{
checkedData.push(language[i].value);
}
}
var country = document.getElementById(‘country’).value;
var phone = document.getElementById(‘phone’).value;

if(f_name==” || f_name==null)
{
valid=false;
var div = document.getElementById(‘f_name_error’);
div.innerHTML = "* Please enter firstname.";
}
else
{
document.getElementById(‘f_name_error’).innerHTML=”;
}

if(l_name==” || l_name==null)
{
valid=false;
var div = document.getElementById(‘l_name_error’);
div.innerHTML = "* Please enter lastname.";
}
else
{
document.getElementById(‘l_name_error’).innerHTML=”;
}

if(email==” || email==null)
{
valid=false;
var div = document.getElementById(’email_error’);
div.innerHTML = "* Please enter email.";
}
else
{
document.getElementById(’email_error’).innerHTML=”;
}

if(password==” || password==null)
{
valid=false;
var div = document.getElementById(‘password_error’);
div.innerHTML = "* Please enter password.";
}
else
{
document.getElementById(‘password_error’).innerHTML=”;
}

if(retype_password==” || retype_password==null)
{
valid=false;
var div = document.getElementById(‘re_password_error’);
div.innerHTML = "* Retype your password here.";
}
else
{
document.getElementById(‘re_password_error’).innerHTML=”;
}

if(checkedData==” || checkedData==null)
{
valid=false;
var div = document.getElementById(‘language_error’);
div.innerHTML = "* Please choose any language.";
}
else
{
document.getElementById(‘language_error’).innerHTML=”;
}

if(country==” || country==null)
{
valid=false;
var div = document.getElementById(‘country_error’);
div.innerHTML = "* Please choose your country.";
}
else
{
document.getElementById(‘country_error’).innerHTML=”;
}

if(phone==” || phone==null)
{
valid=false;
var div = document.getElementById(‘phone_error’);
div.innerHTML = "* Please enter your phone number.";
}
else
{
document.getElementById(‘phone_error’).innerHTML=”;
}

if(phone!=”)
{
valid = phoneNumberValidation(phone);
}

if(password!=” && retype_password!=”)
{
if(password != retype_password)
{
valid=false;
var div = document.getElementById(‘re_password_error’);
div.innerHTML = "* Password do not match. Please check it.";
}

if(password == retype_password)
{
document.getElementById(‘re_password_error’).innerHTML=”;
}
}

if(valid==false)
{
return false;
}
else
{
alert("You form is ready to submit.");
return true;
}
}
[/code]

STEP 3:

Then create a style.css file to give style to our registration form.

[code]
.form-table
{
width:400px;
margin-left: auto;
margin-right: auto;
}
label{
font-weight: bold;
}
#form_submission_ajax{
background-color: #eee;
padding-top: 10px;
padding-bottom: 10px;
}

.error{
color: #ff0000;
}
[/code]

Finally our code is completed and ready to run. Thanks for reading this tutorial.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

• How To Customize Google Maps
• How To Create 3D Effects On Your Images With JavaScript Plugin
• Javascript Age Verification
• Shrinking Navbar Resize When Scrolling Down – Jquery Tutorial

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Javascript Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.