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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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