JavaScript Form validation
registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">REGISTRATION FORM</div>
<div class="form" name="formdiv">
<form name="myform" method="post" action="https://www.nsec.ac.in/" onsubmit="return validateform()">
<div class="element" name="inputdiv">Name: <input type="text" name="name"></div>
<div class="element">Address: <input type="text" name="address"></div>
<div class="element">Email-Address: <input type="text" name="email"></div>
<div class="element">Password: <input type="text" name="password"></div>
<div class="element">Telephone: <input type="text" name="phone"></div>
<div class="element">
Select Your course
<select name="course" id="">
<option value="WB">BTECH</option>
<option value="MBBS">MBBS</option>
<option value="BSC">BSC</option>
<option value="BARCH">BARCH</option>
<option value="MTECH">MTECH</option>
<option value="MSC">MSC</option>
<option value="MBA">MBA</option>
</select>
</div>
<div class="element">Comments: <textarea name="comments" id=""></textarea></div>
<div class="element0">
Select all the scripting languages you know <br>
<div class="elechield">
<input type="checkbox" name="scriptingLanguage" value="JavaScript"> JavaScript
<input type="checkbox" name="scriptingLanguage" value="Perl"> Perl
<input type="checkbox" name="scriptingLanguage" value="Reset"> Reset
</div>
</div>
<div class="element0">
<input type="submit" value="submit" class="btn">
<input type="reset" value="reset" class="btn">
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
function validateform() {
var name = document.myform.name.value.trim();
var address = document.myform.address.value.trim();
var email = document.myform.email.value.trim();
var password = document.myform.password.value.trim();
var phone = document.myform.phone.value.trim();
var scriptingLanguages = document.querySelectorAll('input[name="scriptingLanguage"]:checked');
if (name === "") {
alert("Name is empty");
return false;
}
else if (address === "") {
alert("Address is empty");
return false;
}
else if (email === "") {
alert("Email is empty");
return false;
}
else if (!/^\S+@\S+\.\S+$/.test(email)) {
alert("Invalid email address");
return false;
}
else if (password === "") {
alert("Password is empty");
return false;
}
else if (!/(?=.*[!@#$%^&*])(?=.*[0-9])(?=.*[a-zA-Z])/.test(password)) {
alert("Password must contain at least one special character, one number, and one letter");
return false;
}
else if (password.length < 8) {
alert("Password must be at least 8 characters long");
return false;
}
else if (phone === "") {
alert("Phone number is empty");
return false;
}
else if (!/^\d{10}$/.test(phone)) {
alert("Phone number is wrong! It should be exactly 10 digits long");
return false;
}
else if (scriptingLanguages.length === 0) {
alert("Please select at least one scripting language");
return false;
}
return true; // Form is valid
}
Comments
Post a Comment