Scribd
Upload
3K views

Week 3: Validation: Write Javascript To Validate The Following Fields of The Above Registration Page

The document describes JavaScript code to validate different fields on a registration form, including name, password, email, and phone number. It provides code snippets to validate that the name field contains only alphabetic characters and has a minimum length of 6, password has minimum length of 6, email is in the proper format of [email protected], and phone number contains only 10 digits. Finally, it shows a full registration form implementation that incorporates all of the validation functions.

Uploaded by

SahilaKhan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3K views

Week 3: Validation: Write Javascript To Validate The Following Fields of The Above Registration Page

The document describes JavaScript code to validate different fields on a registration form, including name, password, email, and phone number. It provides code snippets to validate that the name field contains only alphabetic characters and has a minimum length of 6, password has minimum length of 6, email is in the proper format of [email protected], and phone number contains only 10 digits. Finally, it shows a full registration form implementation that incorporates all of the validation functions.

Uploaded by

SahilaKhan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Week 3

VALIDATION:
Write JavaScript to validate the following fields of the above registration page.
(i) Name (Name should contain alphabets and the length should not be less than 6 characters).
(ii) Password (Password should not be less than 6 characters length).
(iii) E-mail id (should follow the standard pattern [email protected])
(iv) Phone number (Phone number should contain 10 digits only).

(i) Name
(Name field should contain alphabets & the length should not be less than 6 characters).
name.html
<html>
<head>
<title>
Validations
</title>
<script language="javascript">
function isValidation()
{
var uname=document.getElementById('uname');
if(isalphabet(uname,'Please enter alphabets only'))
if(restrictlengthname(uname,6))
return true;
else
return false;
}
function isalphabet(elem,helpermsg)
{
var alphaexp=/^[a-z A-Z]+$/;
if(elem.value.match(alphaexp))
{

return true;
}
else
{
alert(helpermsg);
elem.focus();
return false;
}
}
function restrictlengthname(elem,min)
{
var uinput=elem.value;
if(uinput.length>=min)
{
return true;
}
else
{
alert("Please enter atleast " +min+ "characters");
elem.focus();
return false;
}
}
</script>
</head>

<body bgcolor="pink">
<h2>Validations</h2>
<form>
Name:
<input type ="text" name="name" id='uname'> <br><br>
<input type="submit" value="Submit" onclick="isValidation()"/>
<input type="reset" value="Reset">
</form>
</body>
</html>

OUTPUT

(ii) Password (Password should not be less than 6 characters length).


password.html
<html>
<head>
<title>
Validations
</title>
<script language="javascript">
function isValidation()
{
var pwd=document.getElementById('pwd');
if(restrictlengthname(pwd,6))

return true;
else
return false;
}
function restrictlengthname(elem,min)
{
var uinput=elem.value;
if(uinput.length>=min)
{
return true;
}
else
{
alert("Please enter atleast " +min+ "characters");
elem.focus();
return false;
}
}
</script>
</head>
<body bgcolor="pink">
<h2>Validations</h2>
<form>
Password:
<input type ="password" name="password" id='pwd'> <br><br>

<input type="submit" value="Submit" onclick="isValidation()"/>


<input type="reset" value="Reset">
</form>
</body>
</html>

OUTPUT

(iii) E-mail id (should follow the standard pattern [email protected])


email.html
<html>
<head>
<title>
Validations
</title>
<script language="javascript">

function isValidation()
{
var mail=document.getElementById('mail');
if(emailvalidation(mail,'Please enter a valid email id'))
return true;
else
return false;
}
function emailvalidation(elem,helpermsg)
{
var emailexp=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
if(elem.value.match(emailexp))
{
return true;
}
else
{
alert(helpermsg);
elem.focus();
return false;
}
}
</script>
</head>
<body bgcolor="pink">

<h2>Validations</h2>
<form>
Email ID:
<input type ="text" name="email" id='mail'> <br><br>
<input type="submit" value="Submit" onclick="isValidation()"/>
<input type="reset" value="Reset">
</form>
</body>
</html>

OUTPUT

(iv) Phone number (Phone number should contain 10 digits only).


phone.html
<html>
<head>

<title>
Validations
</title>
<script language="javascript">
function isValidation()
{
var ph=document.getElementById('ph');
if(isnumeric(ph,'Please enter digits only'))
if(restrictlength(ph,10))
return true;
else
return false;
}
function isnumeric(elem,helpermsg)
{
var numexp=/^[0-9]+$/;
if(elem.value.match(numexp))
{
return true;
}
else
{
alert(helpermsg);
elem.focus();
return false;

}
}
function restrictlength(elem,min)
{
var uinput=elem.value;
if(uinput.length==min)
{
return true;
}
else
{
alert("Please enter " +min+ "digits");
elem.focus();
return false;
}
}
</script>
</head>
<body bgcolor="pink">
<h2>Validations</h2>
<form>
Phone:
<input type ="text" name="phone" id='ph'> <br><br>
<input type="submit" value="Submit" onclick="isValidation()"/>
<input type="reset" value="Reset">

</form>
</body>
</html>

OUTPUT

Registration form with validations


<html>
<head>
<title>
Registration
</title>
<script language="javascript">
function isValidation()
{
var uname=document.getElementById('uname');
var pwd=document.getElementById('pwd');
var ph=document.getElementById('ph');
var mail=document.getElementById('mail');

if(isalphabet(uname,'Please enter alphabets only'))


if(restrictlengthname(uname,6))
if(restrictlengthpwd(pwd,6))
if(isnumeric(ph,'Please enter digits only'))
if(restrictlength(ph,10))
if(emailvalidation(mail,'Please enter a valid email id'))

return true;
else

return false;
}
function isalphabet(elem,helpermsg)
{
var alphaexp=/^[a-z A-Z]+$/;
if(elem.value.match(alphaexp))
{
return true;
}
else
{
alert(helpermsg);
elem.focus();
return false;
}
}
function restrictlengthname(elem,min)
{
var uinput=elem.value;
if(uinput.length>=min)
{
return true;
}
else
{

alert("Please enter atleast " +min+ "characters");


elem.focus();
return false;
}
}
function restrictlengthpwd(elem,min)
{
var uinput=elem.value;
if(uinput.length>=min)
{
return true;
}
else
{
alert("Please enter atleast " +min+ "characters");
elem.focus();
return false;
}
}
function isnumeric(elem,helpermsg)
{
var numexp=/^[0-9]+$/;
if(elem.value.match(numexp))
{
return true;

}
else
{
alert(helpermsg);
elem.focus();
return false;
}
}
function restrictlength(elem,min)
{
var uinput=elem.value;
if(uinput.length==min)
{
return true;
}
else
{
alert("Please enter " +min+ "digits");
elem.focus();
return false;
}
}
function emailvalidation(elem,helpermsg)
{
var emailexp=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

if(elem.value.match(emailexp))
{
return true;
}
else
{
alert(helpermsg);
elem.focus();
return false;
}
}
</script>
</head>
<body bgcolor="pink">
<center>
<h1>REGISTRATION</h1>
</center>
<form>
<table border="0">
<tr>
<td>Name:</td>
<td><input type ="text" name="name" id='uname'></td>
</tr>
<tr>
<td>Password:</td>

<td><input type="password" name="pwd" id='pwd'></td>


</tr>
<tr>
<td>Phone No :</td>
<td><input type="text" name="phone" id='ph'></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="mail" id='mail'></td>
</tr>
<tr>
<td>Gender :</td>
<td><input type="radio" name="group1" value="Male"> Male
<input type="radio" name="group1" value="Female"> Female</td>
</tr>
<tr>
<td>Date of Birth :</td>
<td> <select name="Day">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
</select>
<select name="Month">
<option value="Jan"> January </option>

<option value="Feb"> February </option>


<option value="Mar"> March </option>
<option value="Apr"> April </option>
</select>
<select name="Year">
<option value="1"> 1991 </option>
<option value="2"> 1992 </option>
<option value="3"> 1993 </option>
<option value="4"> 1994 </option>
</select></td>
</tr>
<tr>
<td>Languages Known :</td>
<td><input type = "checkbox" name="option1" value="English"> English
<input type = "checkbox" name="option2" value="Urdu"> Urdu
<input type = "checkbox" name="option3" value="Telugu"> Telugu
<input type = "checkbox" name="option4" value="Hindi"> Hindi</td>
</tr>
<tr>
<td> Address :</td>
<td><textarea cols="40" rows="4" name="address"> </textarea></td>
</tr>
<tr>
<td><input type="submit" value="Submit" onclick="isValidation()"/>
<input type="reset" value="Reset"></td>

</tr>
</table>
</form>
</body>
</html>

OUTPUT

You might also like