Slip 12 - A) Design a student registration form with fields Name, Address, city and Pin-Code. Write a java script program to perform following validation i. Check name should not be empty and contain alphabets only ii. Pin-code must be 6 digits only

Solution:

<html>

<head>

<script>

function validate()

{

var name=document.getElementById("text1").value;

var mob=document.getElementById("text2").value;

var add=document.getElementById("text3").value;

var city=document.getElementById("text4").value;

var state=document.getElementById("text5").value;

var pin=document.getElementById("text6").value;

if(name==null||name=="")

alert("Name Should not be Null");

if(!isNaN(name))

alert("Name Should only contain Characters");

if(mob.length!=10)

alert("Mobile number should be exactly 10 digits long.");

if(add==null||add=="")

alert("Address Should not be Null.");

if(city==null||city=="")

alert("City Should not be Null.");

if(state==null||state=="")

alert("State Should not be Null.");

if(pin.length!=6)

alert("Pin Code should be exactly 6 digits long.");

}

</script>

</head>

<body>

<table>

<h1>Student Registration Form</h1>

<tr><td>Name:</td> <td><input type="text"id="text1"></td></tr>

<tr><td>Mobile:</td><td><input type="text"id="text2"></td></tr>

<tr><td>Address:</td><td><input type="text"id="text3"></td></tr>

<tr><td>City:</td><td><input type="text"id="text4"></td></tr>

<tr><td>State:</td><td><input type="text"id="text5"></td></tr>

<tr><td>Pin:</td><td><input type="text"id="text6"></td></tr>>

<tr><td><input type="button"value="submit" onclick="validate()"/></td>

<td><input type="reset" value="clear" onclick="reset()"/></td></tr>

</table>

</body>

</html>

 Name and Mobile Number

<html>

<head>

<title>Form</title>

<script type='text/javascript'>

function chkForm()

{

//validate form fields

/* first step is to fetch all entry values */

 idVal=document.getElementById('t1').value;

MobileNumber=document.getElementById('t2').value;

 /* check id field for required length */

if(idVal.length<5)

{

alert('User name should countain 5 characters');

document.getElementById('t1').value='';

document.getElementById('t1').focus();

return false;

}

// validation of alphabetics

if(idVal)

{

for(var i = 0;i<idVal.length; i++)

{

if(idVal.charAt(i) < 'A' || idVal.charAt(i) > 'Z' && idVal.charAt(i) <'a' || idVal.charAt(i)>'z')

{

alert("Invalit Text,not accept numbers, special characters, alphanumeric characters")

return false;

}

}

}

 //validation of mobile number.

 if(document.getElementById('t2').value =='')

{

alert("Enter 10 digit mobile number");

return false;

}         

if(document.getElementById('t2').value != "")

{

var y = document.getElementById('t2').value;

 if(isNaN(y)||y.indexOf(" ")!=-1)

{

alert("Invalid Mobile No.");

document.getElementById('mobile_number').focus();

return false;

}

 if (y.length>10 || y.length<10)

{

alert("Mobile No. should be 10 digit");

document.getElementById('mobile_number').focus();

return false;

}

if (!(y.charAt(0)=="9" || y.charAt(0)=="8"))

{

alert("Mobile No. should start with 9 or 8 ");

document.getElementById('mobile_number').focus();

return false

}

}

return true;

}

</script>

</head>

<body>

<table border="1" width="60%">

<form action="#" name="adminForm" id="adminForm">

<tr><td>Name</td><td><input type="text" name="t1" id="t1"></tr>

<tr><td>Mobile No</td><td><input type="text" name="t2" id="t2"></tr>

<tr><td align="center" colspan="2">

<input type="submit" name="submit" Value="Submit" onclick="return chkForm();" /></td></tr>

</form>

</table>

</body>

</html>

Post a Comment

0 Comments