Scribd
Upload
14 views7 pages

WT PR 4

The document is an assignment submission that designs a registration form using JavaScript for validation. It includes the student's name and roll number, title of the assignment, and the full code for a registration form with fields like username, password, name, address, country, zip code, email, gender, language, about, and JavaScript code to validate the fields on form submit.

Uploaded by

om.lohade23
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
14 views7 pages

WT PR 4

The document is an assignment submission that designs a registration form using JavaScript for validation. It includes the student's name and roll number, title of the assignment, and the full code for a registration form with fields like username, password, name, address, country, zip code, email, gender, language, about, and JavaScript code to validate the fields on form submit.

Uploaded by

om.lohade23
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/ 7

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 :

You might also like