[go: up one dir, main page]
Scribd
Upload
117 views6 pages

Form Validation

This document contains code for a form validation script. The script validates form fields for first name, last name, email, phone number, password, and confirmed password on form submit. It checks that the first and last name only contain letters, the email is a valid format, phone number is 10 digits, password is at least 6 characters, and passwords match. If any validation checks fail, an alert is shown.

Uploaded by

Nayana Gowda
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
117 views6 pages

Form Validation

This document contains code for a form validation script. The script validates form fields for first name, last name, email, phone number, password, and confirmed password on form submit. It checks that the first and last name only contain letters, the email is a valid format, phone number is 10 digits, password is at least 6 characters, and passwords match. If any validation checks fail, an alert is shown.

Uploaded by

Nayana Gowda
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/ 6

Form validation:

<!doctype html>
<html>
<head>
<title>SIGNUP PAGE</title>
<style>
div
{
margin:0px auto;
width:50%;

padding:30px;
font-size:20px;
background-color:#4e2a38;
color:white;
}
input[type=text],select
{
width:95%;
padding:12px 20px;
margin:8px 0;
display:inline-block;
border:1px solid #AAA
box-sizing:border-box;
font-size:14px;
}
input[type=submit]
{
width:100%;
background-color:#003399;
color:white;
padding:14px 20px;
margin:8px 0;
border:none;
border-radius:4px;
cursor:pointer;
font-size:16px;
}

input[type=submit]:hover
{
background-color:#2F4F4F;
}

h1
{
color:BlueS;
text-align:center;
}
</style>
<script>
function validate()
{
var Email=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
var Phone=/^\d{10}$/;
var Name = /\d+$/g;
var fname=document.getElementById("fname").value;
var lname=document.getElementById("lname").value;
var email=document.getElementById("email").value;
var pass1=document.getElementById("pass").value;
var pass2=document.getElementById("cpass").value;
var phone=document.getElementById("phone").value;

if (fname == "" || Name.test(fname)) {


window.alert("Please enter your first name properly.");
fname.focus();
return false;
}
if (lname == "" || Name.test(lname)) {
window.alert("Please enter your last name properly.");
lname.focus();
return false;
}
if (email == "" || !Email.test(email)) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone == "" || !Phone.test(phone)) {
alert("Please enter valid phone number.");
phone.focus();
return false;
}
if (pass1 == "") {
alert("Please enter your password");
pass1.focus();
return false;
}

if(pass1.length <6){
alert("Password should be atleast 6 character long");
pass1.focus();
return false;
}

if(pass1 != pass2){
alert("Password should be same");
pass2.focus();
return false;
}
}
</script>

</head>

<body>
<h1><U>SIGNUP PAGE</U></h1>
<div>
<form name="reg" method="post" onsubmit="validate( )">
<input type="text" id="fname" name="firstname" placeholder="Enter First Name">

<input type="text" id="lname" name="lasttname" placeholder="Enter Last Name">


<input type="text" id="email" name="email" placeholder="Enter Gmail">
<input type="text" id="phone" name="phone" placeholder="Enter Phone Number">
<input type="text" id="pass" name="password" placeholder="Enter Password">
<input type="text" id="cpass" name="password1" placeholder="Conform Password">
<br><br><label for="sex">SEX</label><br>
<input type="radio" name="sex" value="Male">Male
<input type="radio" name="sex" value="Female">Female
<input type="radio" name="sex" value="Others">Others

<br><br><label for="age">AGE</label><br>
<input type="radio" name="age" value="18-">Below 18-
<input type="radio" name="age" value="18+">Above 18+<br><br>

<input type="submit" value="SUBMIT">

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

You might also like