1
----------------------------Input form element Validation without RE-----------------
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
x = document.myForm.fname.value;
y=document.myForm.mno.value;
if (test(x))
{
if (test1(y))
{
return true;
}}
return false;
}
function test(x)
{
if (x.length==0) {
alert("Name must be filled out");
return false;
}
document.getElementById("outtab").rows[1].cells[1].innerHTML=x;
return true;
}
function test1(y)
{
if (y.length==0) {
alert("mobile must be filled out");
return false;
}
document.getElementById("outtab").rows[2].cells[1].innerHTML=y;
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<br/> <br/>
Mobile number : <input type="text" name="mno">
Dr.Brindha.K
2
<br/> <br/>
<input type="submit" value="Submit">
</form>
<br/><br/><br/>
<table id ="outtab" border ="2" bordercolor="blue">
<tr><td colspan="2">FORM OUTPUT</td></tr>
<tr><td>Name</td><td></td></tr>
<tr><td>Mobile number</td><td></td></tr>
</table>
<button onclick="validateForm()">Display</button>
</body>
</html>
OUTPUT
-------
-------------------------------------------------------------------------------
Dr.Brindha.K
3
----------------------Input form element validation with RE------------------------
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
x = document.myForm.fname.value;
y=document.myForm.mno.value;
if (test(x))
{
if (test1(y))
{
return true;
}}
return false;
}
function test(x)
{
var npat=/\w{5,}/;
if (x.match(npat)) {
document.getElementById("out").innerHTML=x;
return true;
}
alert("Name must be filled atleast 5 characters");
return false;
}
function test1(y)
{
var mpat=/\d{10}/;
if (y.match(mpat)) {
document.getElementById("out1").innerHTML=y;
return true;
}
alert("Enter 10 digits ");
return false;
}
</script>
</head>
<body>
Dr.Brindha.K
4
<form name="myForm" onsubmit="return validateForm()" >
Name: <input type="text" name="fname">
<br/> <br/>
Mobile number : <input type="text" name="mno">
<br/> <br/>
<input type="submit" value="Submit">
</form>
<br/><br/><br/>
<h1> OUTPUT </h1>
<h1 id="out"> </h1>
<h1 id="out1"> </h1>
<button onclick="validateForm()">Display</button>
</body>
</html>
OUTPUT
--------------------------------Radio Button /Checkbox with one option
<!DOCTYPE html>
<html>
<head>
Dr.Brindha.K
5
<script>
function validateForm() {
x = document.myForm.fname.value;
y=document.myForm.mno.value;
z=document.myForm.gender;
if (test(x))
{
if (test1(y))
{
if (test2(z))
{
return true;
}}}
return false;
}
function test(x)
{
if (x.length==0) {
alert("Name must be filled out");
return false;
}
document.getElementById("outtab").rows[1].cells[1].innerHTML=x;
return true;
}
function test1(y)
{
if (y.length==0) {
alert("mobile must be filled out");
return false;
}
document.getElementById("outtab").rows[2].cells[1].innerHTML=y;
return true;
}
function test2(z)
{
for(var i = 0; i < z.length; i++)
{
if(z[i].checked)
{
document.getElementById("outtab").rows[3].cells[1].innerHTML=z[i].val
ue;
return true;
Dr.Brindha.K
6
}
}
alert ( "Please choose your Gender: Male or Female" );
return false;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<br/> <br/>
Mobile number : <input type="text" name="mno">
<br/> <br/>
Your Gender:
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female <br/>
<input type="submit" value="Submit">
</form>
<br/><br/><br/>
<table id ="outtab" border ="2" bordercolor="blue">
<tr><td colspan="2">FORM OUTPUT</td></tr>
<tr><td>Name</td><td></td></tr>
<tr><td>Mobile number</td><td></td></tr>
<tr><td>Gender</td><td></td></tr>
</table>
<button onclick="validateForm()">Display</button>
</body>
</html>
Output
Dr.Brindha.K
7
----------------------------------------Checkbox with multiple option
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var y = document.myForm.course;
cvali(y);
}
function cvali(y)
{
var x = 1;
var flag = 0;
for(var i = 0; i < y.length; i++)
{
Dr.Brindha.K
8
if (y[i].checked)
{
flag =incre(flag);
document.getElementById("outtab").rows[x].cells
[1].innerHTML=y[i].value;
x++;
}
}
if (flag == 0)
{
alert("Select your elective");
return false;
}
else if(flag == 1)
{
alert("Select one more elective");
return false;
}
else if(flag ==2)
{
alert( "u r chosen ur electives");
return true;
}
}
function incre(x)
{
x +=1;
return(x);
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()"
method="post">
Select Atleast two Elective: <br/> <br/>
<input type="checkbox" name="course" value="cloud computing">
Cloud Computing
<input type="checkbox" name="course" value="Data Analytics"> Data
Analytics <br/>
<input type="checkbox" name="course" value="Big Data">Big Data
<br/>
<input type="checkbox" name="course"
value="Cryptography">Cryptography <br/>
Dr.Brindha.K
9
<input type="submit" value="Submit">
</form>
<br/><br/><br/>
<table id ="outtab" border ="2" bordercolor="blue">
<tr><td colspan="2">FORM OUTPUT</td></tr>
<tr><td>Course 1</td><td></td></tr>
<tr><td>Course 2</td><td></td></tr>
</table>
<button onclick="validateForm()">Display</button>
</body>
</html>
Output
---------------------------Select box /list box with one option---------
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var z = document.forms["myForm"]["country"].selectedIndex;
svali(z);
}
function svali(z)
{
if(z > 0)
{
document.getElementById("outtab").rows[0].cells[1].innerHTML =
myForm.country.options[z].value;
Dr.Brindha.K
10
}
else
{
alert('Please select a country from the drop down list');
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<select size="4" name="country">
<option value=""> - Select - </option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="ZM">Zambia</option>
<option value="ID">India</option>
</select>
<input type="submit" value="Submit">
</form>
<br/><br/><br/>
<table id ="outtab" border ="2" bordercolor="blue">
<tr><td>Country</td><td></td></tr>
</table>
<button onclick="validateForm()">Display</button>
</body>
</html>
Output :
Dr.Brindha.K
11
--------------------------Select box with multiple option ----------
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var y = document.myForm.course;
cvali(y);
}
var x = 1;
var flag = 0;
function cvali(y)
{
for(var i = 0; i < y.options.length; i++)
{
if (y.options[i].selected == true)
{
flag =incre(flag);
Dr.Brindha.K
12
document.getElementById("outtab").rows[x].cells[1].innerHTML=y.optio
ns[i].text;
x++;
}
}
if (flag == 0)
{
alert("Select your elective");
return false;
}
else if(flag == 1)
{
alert("Select one more elective");
return false;
}
else if(flag ==2)
{
alert( "u r chosen ur electives");
return true;
}
}
function incre(x)
{
x +=1;
return(x);
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()"
method="post">
Select Atleast two Elective: <br/> <br/>
<select name="course" size ="4" >
<option value=""> - Select - </option>
<option>Cloud Computing </option>
<option> Data Analytics </option>
<option>Big Data</option>
<option>Cryptography </option>
</select>
<input type="submit" value="Submit">
</form>
<br/><br/><br/>
Dr.Brindha.K
13
<table id ="outtab" border ="2" bordercolor="blue">
<tr><td colspan="2">FORM OUTPUT</td></tr>
<tr><td>Course 1</td><td></td></tr>
<tr><td>Course 2</td><td></td></tr>
</table>
<button onclick="validateForm()">Display</button>
</body>
</html>
OUTPUT
Sample form
Sampleform.html
<html>
<head>
<title> Form Validation:Demo Preview </title>
<link rel="stylesheet" type="text/css" href="formvalid.css">
<script src="formvalid.js"></script>
</script>
</head>
Dr.Brindha.K
14
<body>
<div id="main">
<div id="form_layout">
<h2>JavaScript Form Validation</h2>
<!-- Form starts from here-->
<form onsubmit='return formValidation()'><br><p
id="head"></p><br>
<label>Full Name:</label>
<input type='text' id='firstname'/><br />
<p id="p1"></p>
<!--This segment displays the validation rule for name-->
<label>Username(6-8 characters):</label>
<input type='text' id='username' /><br />
<p id="p2"></p>
<!--This segment displays the validation rule for user name-->
<label>Email:</label>
<input type='text' id='email' /><br />
<p id="p3"></p>
<!--This segment displays the validation rule for email-->
<label>Country:</label>
<select id='state'>
<option>Please Choose</option>
<option>America</option>
<option>Australia</option>
<option>Sweden</option>
<option>Africa</option>
<option>India </option>
</select><br />
<p id="p4"></p>
<!--This segment displays the validation rule for selection-->
<label>Address:</label>
<input type='text' id='addr' /><br />
<p id="p5"></p>
<!--This segment displays the validation rule for address-->
<label>Zip Code: </label>
<input type='text' id='zip' /><br />
<p id="p6"></p>
<!--This segment displays the validation rule for zip-->
<input type='submit' id="submit" value='Check Form'/><br />
</form>
</div>
</div>
Dr.Brindha.K
15
</body>
</html>
Formvalid.css
@import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
width:960px;
margin:50px auto;
font-family:raleway;
}
span{
color:red;
}
h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 30px;
}
hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}
#form_layout{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: -2px;
}
Dr.Brindha.K
16
input[type=text],input[type=password],#state{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=submit]{
width: 100%;
background-color:#FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 15px;
}
a{
text-decoration:none;
color: cornflowerblue;
}
i{
color: cornflowerblue;
}
p{
font-size:12px;
color:red;
/*-----------------------------------------------------------------
css settings for right side advertisement
------------------------------------------------------------------*/
#formget{
float:right;
Dr.Brindha.K
17
Formvalid.js
function formValidation(){
// 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');
// to check empty form fields.
if(firstname.value.length == 0){
document.getElementById('head').innerText = "* All fields are
mandatory *"; //this segment displays the validation rule for all fields
firstname.focus();
return false;
}
// Check each input in the order that it appears in the form!
if(inputAlphabet(firstname, "* For your name please use alphabets
only *")){
if(lengthDefine(username, 6, 8)){
if(emailValidation(email, "* Please enter a valid email
address *")){
if(trueSelection(state, "* Please Choose any one option")){
if(textAlphanumeric(addr, "* For Address please use
numbers and letters *")){
if(textNumeric(zip, "* Please enter a
valid zip code *")){
return true;
}
}
}
Dr.Brindha.K
18
}
}
}
return false;
//function that checks whether input text is numeric or not.
function textNumeric(inputtext, alertMsg){
var numericExpression = /^[0-9]+$/;
if(inputtext.value.match(numericExpression)){
return true;
}else{
document.getElementById('p6').innerText = alertMsg; //this
segment displays the validation rule for zip
inputtext.focus();
return false;
}
}
//function that checks whether input text is an alphabetic character or not.
function inputAlphabet(inputtext, alertMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(inputtext.value.match(alphaExp)){
return true;
}else{
document.getElementById('p1').innerText = alertMsg; //this
segment displays the validation rule for name
//alert(alertMsg);
inputtext.focus();
return false;
}
}
//function that checks whether input text includes alphabetic and numeric
characters.
Dr.Brindha.K
19
function textAlphanumeric(inputtext, alertMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(inputtext.value.match(alphaExp)){
return true;
}else{
document.getElementById('p5').innerText = alertMsg; //this
segment displays the validation rule for address
inputtext.focus();
return false;
}
}
// Function that checks whether the input characters are restricted
according to defined by user.
function lengthDefine(inputtext, min, max){
var uInput = inputtext.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
document.getElementById('p2').innerText = "* Please enter
between " +min+ " and " +max+ " characters *"; //this segment displays
the validation rule for username
inputtext.focus();
return false;
}
}
// Function that checks whether a option is selected from the selector and if
it's not it displays an alert message.
function trueSelection(inputtext, alertMsg){
if(inputtext.value == "Please Choose"){
document.getElementById('p4').innerText = alertMsg; //this
segment displays the validation rule for selection
inputtext.focus();
return false;
}else{
return true;
}
}
Dr.Brindha.K
20
// Function that checks whether an user entered valid email address or not
and displays alert message on wrong email address format.
function emailValidation(inputtext, alertMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(inputtext.value.match(emailExp)){
return true;
}else{
document.getElementById('p3').innerText = alertMsg; //this
segment displays the validation rule for email
inputtext.focus();
return false;
}
}
Dr.Brindha.K
