Try this code by copy then paste it to your .html or .php extension file type.
note: You can modify this code.
code to paste:
<html>
<head>
<link type="text/css" rel="stylesheet" href="images/style.css" />
<script type='text/javascript'>
function formValidator()
{
// Make quick references to our fields
var lastaname = document.getElementById('lastname');
var firstname = document.getElementById('firstname');
var mi = document.getElementById('mi');
var age = document.getElementById('age');
var sex = document.getElementById('sex');
var religion = document.getElementById('religion');
var email = document.getElementById('email');
var timedeparture = document.getElementById('timedeparture');
var ampmdep = document.getElementById('ampmdep');
var dayarrival = document.getElementById('dayarrival');
var timearrival = document.getElementById('timearrival');
var ampmar = document.getElementById('ampmar');
var noofseats = document.getElementById('noofseats');
// Check each input in the order that it appears in the form!
if(isAlphabet(lastname, "Please type letter for your lastname")){
if(isAlphabet(firstname, "Please type letter for your firstname")){
if(isAlphabet(mi, "Please type letter for your civilstatus")){
if(isNumeric(age, "Please type number for your age")){
if(madeSelection(sex, "Please choose for sex")){
if(madeSelection(civilstatus, "Please choose for civil status")){
if(isAlphabet(religion, "Please type letter for your religion")){
if(emailValidator(email, "Please type a valid email address")){
return true;
}
}
}
}
}
}
//
}
}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9] $/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z] $/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z] $/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " min " and " max " characters");
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == ""){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\ ] \@[a-zA-Z0-9\.\-] \.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="save_entry.php" name="personalentry" onsubmit="return formValidator()">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="250">
<tr>
<td colspan="3" align="center" bgcolor="#336699" height="50"><font face="verdana" size="2">Personal Data Sample Entry</font></td>
</tr>
<tr>
<td bgcolor="#0099FF"><font face="verdana" size="2">Lastname</font></td>
<td bgcolor="#0099FF"><input type="text" name="lastname" id="lastname"></td>
</tr>
<tr>
<td bgcolor="#336699"><font face="verdana" size="2">Firstname</font></td>
<td bgcolor="#336699"><input type="text" name="firstname" id="firstname"></td>
</tr>
<tr>
<td bgcolor="#0099FF"><font face="verdana" size="2">mi</font></td>
<td bgcolor="#0099FF"><input type="text" name="mi" id="mi" maxlength="2"></td>
</tr>
<tr>
<td bgcolor="#336699"><font face="verdana" size="2">age</font></td>
<td bgcolor="#336699"><input type="text" name="age" id="age" maxlength="2"></td>
</tr>
<tr>
<td><font face="verdana" size="2">sex</font></td>
<td bgcolor="#0099FF">
<select name="sex" id="sex">
<option value=""></option>
<option value="male"><font face="verdana" size="2">male</font></option>
<option value="female"><font face="verdana" size="2">female</font></option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#336699"><font face="verdana" size="2">civil status</font></td>
<td bgcolor="#336699">
<select name="civilstatus" id="civilstatus">
<font face="verdana" size="2">
<option value=""></option>
<option value="single">single</option>
<option value="married">married</option>
<option value="married">Separated</option>
<option value="widow">widow</option>
</font>
</select>
</td>
</tr>
<tr>
<td bgcolor="#0099FF"><font face="verdana" size="2">religion</font></td>
<td bgcolor="#0099FF"><input type="text" name="religion" id="religion"></td>
</tr>
<tr>
<td bgcolor="#336699"><font face="verdana" size="2">Email</font></td>
<td bgcolor="#336699"><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#0099FF"><input type="submit" value="submit"><input type="reset" value="reset"></td>
</tr>
</form>
</body>
</html>
No comments:
Post a Comment