SOURCE CODE:
Exex8.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Illustrate from input validation with DOM2</title>
<script type="text/javascript" src="validator2.js">
</script>
</head>
<body>
<h3>customer information</h3>
<form action="cinfo.html">
<p>
<label>
<input type="text" id="custName">
Name(last name,first name,middle initial)
</label>
<br/><br/>
<label>
<input type="text" id="phone">
Phone number(ddd-ddd-dddd)
</label>
<br/><br/>
<input type="reset">
<input type="submit" id="submitbutton">
</p>
</form>
<script type="text/javascript" src="validator2r.js"></script>
</body>
</html>
Cinfo.html
<html>
<head>
<body>
customer information successfully
</body>
</head>
</html>
Validator2.js
function chkName(event){
var myName=event.currentTarget;
var pos=myName.value.search(/^\w+,?\w+,?\w.?$/);
if(pos!=0){
alert("Name entered is wrong");
myName.focus();
myName.select();
}
else
{
alert("entered name correctly");
}
}
function chkPhone(event){
var myPhone=event.currentTarget;
var pos=myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/);
if(pos!=0){
alert("entered phone number is wrong.");
myPhone.focus();
myPhone.select();
}
else
{
alert("entered number format is correct");
}
}
Validator2r.js
var customerNode=document.getElementById("custName");
var phoneNode=document.getElementById("phone");
customerNode.addEventListener("change",chkName,false);
phoneNode.addEventListener("change",chkPhone,false);
No comments:
Post a Comment