Scribd
Upload
11 views

Task7 20bci021

Uploaded by

sahaj jain
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
11 views

Task7 20bci021

Uploaded by

sahaj jain
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/ 5

CSE3002 Internet and Web Programming

(Lab) Summer 2023-24 (L21+L22+L51+L52)


Exersice 7: JavaScript Form Validation
Name: Sahaj Jain
Reg No: 20BCI0121

Code:

index.html

<head>

<title>Task 7</title>

</head>
<body>
<div class="container">
<h1>Form Validation</h1>
<form action="" method="get" id="form" name="details" onsubmit="return validate()">
<input class="color" type="text" name="name" id="name"
placeholder="Username*"><br>
<input class="color" type="password" name="pass" id="pass"
placeholder="Password*"><br>
<input class="color" type="date" name="date" id="date" placeholder="DOB*"><br>
<input class="color" type="email" name="mail" id="mail" placeholder="email*"><br>
<input class="color" type="number" name="mobile" id="mobile" placeholder="contact
number*"><br>

<div class="radio">

<input type="radio" name="gender" id="m" value="male">


<label for="male">Male</label>
<input type="radio" name="gender" id="f" value="female">
<label for="female">Female</label>
<input type="radio" name="gender" id="o" value="other">
<label for="other">Other</label>

</div>

<br>

<div class="checkbox" name="check">

<input type="checkbox" name="languages" id="english" value="english">


<label for="english">English</label>
<input type="checkbox" name="languages" id="hindi" value="hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" name="languages" id="tamil" value="tamil">
<label for="tamil">Tamil</label>

</div>

<br>

<select name="state" id="state">


<option value="selectstate">Select State</option>
<option value="assam">Assam</option>
<option value="rajastahn">Rajasthan</option>
<option value="maharashtra">Maharasthra</option>
<option value="delhi">Delhi</option>
<option value="tamilnadu">Tamil Nadu</option>
</select>

<br>

<input type="submit" value="submit" placeholder="Submit" id="submit">

</form>
</div>

<script>
function validate(){

var name = document.details.name;


var pass = document.details.pass;
var dob = document.details.date;
var email = document.details.mail;
var mobile = document.details.mobile;

var m = document.getElementById("m");
var f = document.getElementById("f");
var o = document.getElementById("o");

var h = document.getElementById("hindi");
var e = document.getElementById("english");
var t = document.getElementById("tamil");

var state = document.getElementById("state");

if(name.value.length == 0){
alert("name cannot be empty");
name.focus();
return false;
}
else if( !name.value.match(/^[A-Za-z]+$/)){
alert("name should be alphabet only");
name.focus();
return false;
}
else if(pass.value.length==0){
alert("passord cannot be empty");
pass.focus();
return false;
}
else if(!pass.value.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$!&^*])[A-za-z\
d@#$!&^*]{8,}/)){
alert("Password should contain at least one upper case alphabet, a special character and
a number and should be at least 8 characters in length");
pass.focus();
return false;
}
else if(dob.value.length == 0){
alert("DOB cannot be empty");
dob.focus();
return false;
}
else if(email.value.length==0){
alert("mail cannot be empty");
email.focus();
return false;
}
else if(mobile.value.length!=10){
alert("Mobile should be of 10 digits");
mobile.focus();
return false;
}

else if(!m.checked && !f.checked && !o.checked){


alert("Select a Gender");
return false;
}

else if(!e.checked && !h.checked && !t.checked){


alert("Select atleast one Language ");
return false;
}
else if(state.value=="selectstate"){
alert("Select a Sate");
return false;
}
else{
return true;
}
}

</script>

</body>
</html>

Output Screenshot:

You might also like