Assignment No : 5
Name : Lohade Om Manoj
Roll No : SEDA C - 3
Title : Design a Registration form using javascript
Program :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 4</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="#" onsubmit="return validate()">
<label>User ID *:</label>
<input type="text" id="uid" placeholder="Enter ID" autocomplete="off">
<strong>
<span id="uidspan" style="color: red;"></span></strong><br><br>
<label>Password *:</label>
<input type="password" id="pass" placeholder="Enter Password">
<strong>
<span id="passspan" style="color: red;"></span></strong><br><br>
<label>Name *:</label>
<input type="text" id="name" placeholder="Enter Name">
<strong>
<span id="namespan" style="color: red;"></span></strong><br><br>
<label>Address :</label>
<br><textarea id="address" cols="50" rows="4"></textarea>
<strong>
<span id="addrspan" style="color: red;"></span></strong><br><br>
<label>Country *:</label>
<select id="Country">
<option value="(Choose an Option)">Choose an Option</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Russia">Russia</option>
<option value="Japan">Japan</option>
<option value="UAE">UAE</option>
</select>
<strong>
<span id="countryspan" style="color: red;"></span></strong><br><br>
<label>ZIP Code *:</label>
<input type="text" id="zip">
<strong>
<span id="zipspan" style="color: red;"></strong></span><br><br>
<label>Email *: </label>
<input type="text" id="email">
<strong>
<span id="emailspan" style="color: red;"></span></strong><br><br>
<label>Gender* : </label>
<input type="radio" id="male">Male
<input type="radio" id="female">Female
<strong>
<span id="genderspan" style="color: red;"></span></strong>
<br><br>
<label>Language* :</label>
<input type="checkbox" id="eng">English
<input type="checkbox" id="other">Other
<strong>
<span id="langspan" style="color: red;"></span></strong>
<br><br>
<label>About :</label>
<br><textarea id="About" cols="60" rows="5"></textarea>
<span id="aboutspan" style="color: red;"></span><br><br>
<input type="submit" name="submit" value="submit">
</form>
<script>
function validate() {
var username = document.getElementById('uid').value;
var password = document.getElementById('pass').value;
var name = document.getElementById('name').value;
var add = document.getElementById('address').value;
var country = document.getElementById('Country');
var zip = document.getElementById('zip').value;
var email = document.getElementById('email').value;
var about = document.getElementById('About').value;
var male = document.getElementById('male').checked;
var female = document.getElementById('female').checked;
var eng = document.getElementById("eng").checked;
var noneng = document.getElementById("other").checked;
if ((username == "") || (username.length < 5) || (username.length > 12)) {
document.getElementById('uidspan').innerHTML = "** Required and
must be of length 5 to 12.";
document.getElementById('uid').style.borderColor = "red";
}
if (password == "" || password.length < 7 || password.length > 12) {
document.getElementById('passspan').innerHTML = "** Required and
must be of length 7 to 12.";
document.getElementById('password').style.borderColor = "red";
}
if (name == "" || (!isNaN(name))) {
document.getElementById("namespan").innerHTML = "** Required and
alphabets only.";
document.getElementById('name').style.borderColor = "red";
if (country.value == "(Choose an Option)") {
document.getElementById('countryspan').innerHTML = "** Required.
Must select a country.";
document.getElementById('Country').style.borderColor = "red";
if (zip == "" || isNaN(zip)) {
document.getElementById('zipspan').innerHTML = "** Required. Must
be a numeric value.";
document.getElementById('address').style.borderColor = "red";
if (male == false && female == false) {
document.getElementById('genderspan').innerHTML = "** Required."
}
if (eng == false && noneng == false) {
document.getElementById('langspan').innerHTML = "** Required.";
}
if (email == "" || email.indexOf('@') <= 0 || (email.charAt(email.length - 4)
!= '.' && email.charAt(email.length - 3) != '.')) {
document.getElementById("emailspan").innerHTML = "** Required.
Must be a valid email.";
}
}
</script>
</body>
</html>
Output :
