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.
Sample Program Output
Program Listing
<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>
