Scribd
Upload
27 views4 pages

HJ

The document contains an HTML registration form with fields for name, email, age, address, date of birth, gender, degree, hobbies, and city selection. It also includes a JavaScript file for form validation, checking inputs like age, gender selection, degree selection, and ensuring at least two hobbies are selected. The form features buttons for registration and cancellation, and uses a cyan background for the table layout.

Uploaded by

ASK 011
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
27 views4 pages

HJ

The document contains an HTML registration form with fields for name, email, age, address, date of birth, gender, degree, hobbies, and city selection. It also includes a JavaScript file for form validation, checking inputs like age, gender selection, degree selection, and ensuring at least two hobbies are selected. The form features buttons for registration and cancellation, and uses a cyan background for the table layout.

Uploaded by

ASK 011
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

1form.

html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>

</head>

<body>
<form>
<table align="center" border="2px" bgcolor="cyan">
<tbody>
<tr>
<td><label for="username">Name : </label><input type="text"
name="username" autofocus
placeholder="Enter Name" required></td>
</tr>
<tr>
<td><label for="email">Email :</label><input type="email"
name="email" id="email" required></td>

</tr>
<tr>
<td><label for="age">Age : </label><input type="text"
name="age" id="age"></td>
<td id="errage"></td>
</tr>
<tr>
<td><label for="address">Address :</label><textarea
name="address" id="addr" cols="30"
rows="5"></textarea></td>
</tr>
<tr>
<td><label for="dob">Date Of Birth : </label><input type="date"
name="dob"></td>

</tr>
<tr>
<td>
<label for="gender">Gender :</label>
<input type="radio" name="gender"><label for="Male">Male
</label>
<input type="radio" name="gender"><label for="Female">
Female </label>
</td>
<td id="errgender"></td>
</tr>
<tr>
<td>
<label for="degree">Degree : </label>
<input type="radio" name="degree" id="Btech"><label
for="Btech">Btech</label>
<input type="radio" name="degree" id="Mtech"><label
for="Mtech">Mtech</label>
<input type="radio" name="degree" id="PHD"><label
for="PHD">PHD</label>
</td>
<td id="errdegree"></td>
</tr>
<tr>
<td><label for="hobbies">Hobbies : </label>
<input type="checkbox" name="hobbies" id="reading"><label
for="reading">Reading</label>
<input type="checkbox" name="hobbies" id="riding"><label
for="riding">Riding</label>
<input type="checkbox" name="hobbies" id="hiking"><label
for="hiking">Hiking</label>

<br>

<input type="checkbox" name="hobbies" id="trekking"><label


for="trekking">Trekking</label>
<input type="checkbox" name="hobbies" id="writting"><label
for="writting">Writing</label>
<input type="checkbox" name="hobbies" id="gaming"><label
for="gaming">Gaming</label>
</td>
<td id="errhobbies"> </td>
</tr>
<tr>
<td><label for="City">City : </label>

<select name="city" id="city">


<option value="">-----Select Any One-----</option>
<option value="udgir">Udgir</option>
<option value="latur">Latur</option>
<option value="pune">Pune</option>
</select>
</td>
</tr>
<tr>
<td><button type="button" onclick="validateForm()">Register
Me</button>
<button type="reset">Cancel</button>
</td>
</tr>
</tbody>
</table>
</form>
<script src="validation.js"></script>
</body>

</html>
2 validation.js
// function validateEmail() {
// var email = document.getElementById("email").value;
// var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// if (!emailRegex.test(email)) {
// document.getElementById("erremail").innerHTML = "Please enter a valid
email address";
// return false;
// }

// document.getElementById("erremail").innerHTML = "";
// return true;
// }
function validateAge() {
var age = document.getElementById("age").value;

if (age.match("^[a-zA-Z]+$")) {
document.getElementById("errage").innerHTML = "age cannot be chracters";
return false;

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

function validateGender() {
var gender = document.getElementsByName('gender');

for (var ob of gender) {


if (ob.checked) {
document.getElementById("errgender").innerHTML = "";
return true;
}
}
document.getElementById("errgender").innerHTML = "please select gender"
return false;

}
function validateDegree() {
var degree = document.getElementsByName("degree");
for (var ob of degree) {
if (ob.checked) {
document.getElementsById("errdegree").innerHTML = "";
return true;
}
}
document.getElementById("errdegree").innerHTML = "Please Select Degree.";
return false;

}
function validateHobbies(){
var hob = document.getElementByName("hobbies");
var cnt=0;
for(var ob of hob){
if(ob.checked ){
cnt++;
if(cnt>=2){
document.getElementById("errhobbies").innerHTML="";
return true;
}
}
}
document.getElementById("errhobbies").innerHTML="please select at least 2 hobbies";
return false;
}

function validateForm() {
var f1 = validateAge();
var f2 = validateGender();
var f3 = validateDegree();
var f4 = validateHobbies();
// var f5 = validateEmail();

return f1 && f2 && f3 && f4 ;


}

You might also like