VB icon

Simple Form Validation in JavaScript

Email
Submitted on: 11/12/2015 1:52:10 PM
By: Jake R. Pomperada  
Level: Beginner
User Rating: Unrated
Compatibility: JavaScript
Views: 1439
author picture
 
     A simple form validation that I wrote in JavaScript to check if the text fields has already a value prior it will send the data in the server for processing like using ASP.NET, ASP, PHP, PERL to process the given data by the user. The code is very simple for beginners that are new in HTML and JavaScript. If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.

 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
				
'**************************************
' Name: Simple Form Validation in JavaScript
' Description:A simple form validation that I wrote in JavaScript to check if the text fields has already a value prior it will send the data in the server for processing like using ASP.NET, ASP, PHP, PERL to process the given data by the user. The code is very simple for beginners that are new in HTML and JavaScript.
If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.
' By: Jake R. Pomperada
'**************************************

<html>
<head>
<title>Form Validation</title>
<style type="text/css">
p,body {
 font-family:arial;
 font-size:20px;
 }
</style>
<script type="text/javascript">
function validate( form )
{
var email_format = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
var phone_format = /^\+?([0-9]{2})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
 
 var fname=form.FirstName.value;
 var lname=form.LastName.value;
 var email=form.Email.value;
 var phone=form.Phone.value; 
 var address=form.Address.value;
var error=document.getElementById('error');
// checking for first name
if(fname==""){
error.innerHTML="* Please enter your first name.";
document.getElementById('FirstName').focus();
return false;
} 
// checking for last name
 if (lname==""){
error.innerHTML="* Please enter your last name.";
document.getElementById('LastName').focus();
return false;
} 
// checking for email address
 if (email==""){
error.innerHTML="* Please enter a valid email address.";
document.getElementById('Email').focus();
return false;
}
 if (!email.match(email_format) ) {
error.innerHTML="* Please enter a valid email address.";
document.getElementById('Email').focus();
return false;
}
if (!phone.match(phone_format) ) {
error.innerHTML="* Please enter a valid telephone number.";
document.getElementById('Email').focus();
return false;
} 
 
// checking for address
 if (address==""){
error.innerHTML="* Please enter your home address.";
document.getElementById('Address').focus();
return false;
}
}
</script>
</head>
<body>
Form Validation
<form name="form" method="post" onsubmit="return validate(this);">
<table cellspacing="6" cellpadding="4" border="0">
<tr>
 <td align="right">
First Name
 </td>
 <td>
<input type="text" name="FirstName" id="FirstName" />
 </td>
</tr>
<tr>
 <td align="right">
Last Name
 </td>
 <td>
<input type="text" name="LastName" id="LastName"/>
 </td>
</tr>
<tr>
 <td align="right">
Email
 </td>
 <td>
<input type="text" name="Email" id="Email" />
 </td>
</tr>
<tr>
 <td align="right">
Phone
 </td>
 <td>
<input type="text" name="Phone" id="Phone" />
 </td>
</tr> 
<tr>
 <td align="right">
Address
 </td>
 <td>
<textarea name="Address" id="Address" cols="23" rows="5" ></textarea>
 </td>
</tr>
		 <tr>  </tr>
<tr>
 <td align="right"></td>
		 <td>
<div id="error"> </div>
			</td>
</tr>
<tr>
 <td align="right"></td>
 <td>
<input type="submit" value="Submit" />
 </td>
</tr>
	</table>
</form>
</form>
</body>
</html>


Other 108 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this code (in the Beginner category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.