Scribd
Upload
3 views

h

The document is an HTML registration form that includes fields for name, email, age, address, gender, hobbies, and city. It features JavaScript validation functions to ensure that the inputs meet specific criteria, such as non-empty fields and valid email formats. The form is designed to submit data to 'display.html' upon successful validation.

Uploaded by

ASK 011
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

h

The document is an HTML registration form that includes fields for name, email, age, address, gender, hobbies, and city. It features JavaScript validation functions to ensure that the inputs meet specific criteria, such as non-empty fields and valid email formats. The form is designed to submit data to 'display.html' upon successful validation.

Uploaded by

ASK 011
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration From</title>

<script>

function validateName(){
var name = document.getElementById("name").value;
if(name.trim()===""){
document.getElementById("errName").innerHTML="name cannot be
blank";
return false;
}
document.getElementById("errName").innerHTML="";
return true;

function validateEmail(){
var email = document.getElementById("email").value;
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if(email.trim()===""){
document.getElementById("errEmail").innerHTML="email cannot be
blank";
return false;
}else{
if(!emailRegex.test(email)){
document.getElementById("errEmail").innerHTML="Invalid email";
return false;
}

document.getElementById("errEmail").innerHTML="";
return true;
}

function validateAge(){
var age = document.getElementById("age").value;
if(age.trim()===""){
document.getElementById("errAge").innerHTML="age cannot be blank";
return false;
}
var age1 = parseInt(age);
if(age1>20 && age1<32){
document.getElementById("errAge").innerHTML="";
return true;
}
document.getElementById("errAge").innerHTML="age is not between 21-31";
return false;

function validateAddress(){
var address = document.getElementById("address").value;
if(address.trim() === ""){
document.getElementById("errAddress").innerHTML="Address cannot be
blank";
return false;
}
document.getElementById("errAddress").innerHTML=""
return true;
}

function validateGender(){
var data = document.getElementsByName("gender");
for(var ob of data){
if(ob.checked){
document.getElementById("errGender").innerHTML="";
return true;
}
document.getElementById("errGender").innerHTML="please select one";
return false;
}
}

function validateHobbies(){
var cnt = 0;
var data = document.getElementsByName("hobbies");
for(var ob of data){
if(ob.checked){
cnt++;
if(cnt>=2){
document.getElementById("errHobbies").innerHTML="";
return true;
}
}
}
document.getElementById("errHobbies").innerHTML="select atleast 2
hobbies";
return false;
}

function validateCity(){
var idx = document.getElementById("city").selectedIndex;
if(idx!=0){
document.getElementById("errCity").innerHTML="";
return true;
}
document.getElementById("errCity").innerHTML="please select one";
return false;
}

function validate(){
var flag = validateName();
var flag2 = validateEmail();
var flag3 = validateAge();
var flag4 = validateAddress();
var flag5 = validateGender();
var flag6 = validateHobbies();
var flag7 = validateCity();
return flag && flag2 && flag3 && flag4 && flag5 && flag6 && flag7;

}
</script>
</head>

<body>
<form onsubmit=" return validate()" action="display.html" method="GET">
<table align="center" border="2px" bgcolor="cyan">
<tr>
<td><label for="name">Name</label></td>
<td><input type="text" id="name" name="name" autofocus
placeholder="Enter Name"></td>
<td id="errName"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" name="email" placeholder="Enter
email"></td>
<td id="errEmail"></td>
</tr>
<tr>
<td><label for="age">Age</label></td>
<td><input type="text" id="age" name="age" placeholder="Enter
age"></td>
<td id="errAge"></td>
</tr>
<tr>
<td><label for="address">Address</label></td>
<td><textarea type="text" id="address" name="address"
placeholder="Enter address"></textarea></td>
<td id="errAddress"></td>
</tr>
<tr>
<td><label for="gender">Gender</label></td>
<td>
<input type="radio" name="gender" id="female" value="female"/><label
for="female">Female</label>
<input type="radio" name="gender" id="male" value="male"/><label
for="male">Male</label>
</td>
<td id="errGender"></td>
</tr>
<tr>
<td><label for="hobbies">Hobbies</label></td>
<td>
<input type="checkbox" name="hobbies" id="reading"
value="reading"/><label for="reading">reading</label>
<input type="checkbox" name="hobbies" id="photpgraphy"
value="photpgraphy"/><label for="photpgraphy">photpgraphy</label>
<input type="checkbox" name="hobbies" id="paperCrafting"
value="paperCrafting"/><label for="paperCrafting"></label>paperCrafting<br>
<input type="checkbox" name="hobbies" id="music" value="music"/><label
for="music">music</label>
<input type="checkbox" name="hobbies" id="gardening"
value="gardening"/><label for="gardening">gardening</label>
<input type="checkbox" name="hobbies" id="biking"
value="biking"/><label for="biking">biking</label>
</td>
<td id="errHobbies"></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td>
<select id="city" name="city">
<option value="test">--------Select---------</option>
<option value="Pune">Pune</option>
<option value="Seoul">Seoul</option>
<option value="Daegu">Daegu</option>
<option value="Busan">Busan</option>
<option value="Khandwa">Khandwa</option>
<option value="Indore">Indore</option>
<option value="Mumbai">Mumbai</option>
<option value="Bhopal">Bhopal</option>
</select>
</td>
<td id="errCity"></td>
</tr>
<tr>
<td> <button type="submit" id="btn" name="btn"
value="submit">Submit</button></td>
<td><button type="reset" id="btn" name="btn"
value="reset">Cancel</button></td>
</tr>

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

You might also like