-- NON EMPTY FIELDS VALIDATION
--Here is the script for validate them all--
<script type='text/javascript'>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
</script>
--This is the code for controllers in the form--
<form>
Required Field: <input type='text' id='req1'/>
<input type='button'
onclick="notEmpty
(document.getElementById('req1'), 'Please Enter a Value')"
value='Check Field' />
</form>
-- ALL NUMBERS ONLY FIELDS
<script type='text/javascript'>
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
<form>
Numbers Only: <input type='text' id='numbers'/>
<input type='button'
onclick="isNumeric
(document.getElementById('numbers'), 'Numbers Only Please')"
value='Check Field' />
</form>
--ALL LETTERS CHECKING FIELDS
<script type='text/javascript'>
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
<form>
Letters Only: <input type='text' id='letters'/>
<input type='button'
onclick="isAlphabet
(document.getElementById('letters'), 'Letters Only Please')"
value='Check Field' />
</form>
--FIELD SIZE VALIDATING
<script type='text/javascript'>
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;
}
}
</script>
<form>
Username(6-8 characters): <input type='text' id='restrict'/>
<input type='button'
onclick="lengthRestriction
(document.getElementById('restrict'), 6, 8)"
value='Check Field' />
</form>
--SELECTION BOX VALUE CHECKING
<script type='text/javascript'>
function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
</script>
<form>
Selection: <select id='selection'>
<option>Please Choose</option>
<option>CA</option>
<option>WI</option>
<option>XX</option>
</select>
<input type='button'
onclick="madeSelection
(document.getElementById('selection'), 'Please Choose Something')"
value='Check Field' />
</form>
--E-MAIL FIELDS CHECKING
<script type='text/javascript'>
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>
<form>
Email: <input type='text' id='emailer'/>
<input type='button'
onclick="emailValidator1
(document.getElementById('emailer'), 'Not a Valid Email')"
value='Check Field' />
</form>
--ALL FORM EVENTS VALIDATING
--HTML CODE
<form onsubmit='return formValidator()' >
First Name: <input type='text' id='firstname' /><br />
Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br />
State: <select id='state'>
<option>Please Choose</option>
<option>AL</option>
<option>CA</option>
<option>TX</option>
<option>WI</option>
</select><br />
Username(6-8 characters): <input type='text' id='username' /><br />
Email: <input type='text' id='email' /><br />
<input type='submit' value='Check Form' /><br />
</form>
--JAVASCRIPT CODE
function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var addr = document.getElementById('addr');
var zip = document.getElementById('zip');
var state = document.getElementById('state');
var username = document.getElementById('username');
var email = document.getElementById('email');
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your name")){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(zip, "Please enter a valid zip code")){
if(madeSelection(state, "Please Choose a State")){
if(lengthRestriction(username, 6, 8)){
if(emailValidator
(email, "Please enter a valid email address")){
return true;
}
}
}
}
}
}
return false;
}
Source Link http://www.tizag.com/javascriptT/javascriptform.php
This is 1st Draft Image.
