How to validate name , email,phone no with javascript and Html
Below is the code of validation
<html>
<head>
<title>
Validation
</title>
<script language="javascript">
function validate() {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var fname = document.getElementById('fname').value;
fname = fname.trim();
var lname = document.getElementById('lname').value;
lname = lname.trim();
var email = document.getElementById('email').value;
email = email.trim();
var contact = document.getElementById('contact').value;
contact = contact.trim();
if (fname == "") {
alert("please enter first name")
}
else if (lname == "") {
alert("please enter last name")
}
else if (email == "") {
alert("please enter email")
}
else if (reg.test(email) == false) {
alert("please enter valid email")
}
else if (contact == "") {
alert("please enter phone number in contact")
}
else if (contact.length != 10) {
alert("please enter correct phone number")
}
else if (contact.length != 10) {
alert("please enter correct phone number")
}
else {
window.location = 'new.html';
}
}
</script>
</head>
<body style="margin:0;">
<div style="width: 100%;height: 25%;">
<br><br>
<h1 style="text-align: center;">Fixed Deposit Form</h1>
</div>
<div style="width: 100%;height: 50%;align-content: center;
align-items: center;text-align: center;">
<div style="display: inline-block; width: 30%;">
</div>
<div style="display: inline-block; width: 39%;border: 1px solid black;
height: 100%;">
<form style="align-content: center;">
<br>
<label style="font-size: 20;">First name : </label>
<input type="text" id="fname" name="fname"><br>
<br>
<label style="font-size: 20;">Last name : </label>
<input type="text" id="lname" "><br>
<br>
<label style=" font-size: 20;">E-mail : </label>
<input type="email" id="email"><br><br>
<label style="font-size: 20;">
Contact : </label>
<input type="number" id="contact"><br><br>
<label style="font-size: 20;">account no : </label>
<input type="number" id="acno"><br><br>
<label style="font-size: 20;"> age:
</label>
<input type="number" id="age"><br><br>
<label style="font-size: 20;">scheme no : </label>
<input type="number" id="scheme"><br>
<br>
<input type="button" onclick="validate()" value="submit"
style="height: 30px;width: 90px;">
<input type="reset" value="reset" style="height: 30px;width: 90px;">
</form>
</div>
<div style="display: inline-block; width: 30%;">
</div>
</div>
<div style="width: 100%;height: 25%;">
</div>
</body>
</html>
Comment for any Query
Comments
Post a Comment