Design HTML form for keeping student record and validate it using Java script.
Demo.html
<!DOCTYPE html>
<html>
<head>
<title>Student Record Form</title>
<script type="text/javascript">
function validateForm() {
var name = document.forms["studentForm"]["name"].value;
var age = document.forms["studentForm"]["age"].value;
var email = document.forms["studentForm"]["email"].value;
var phone = document.forms["studentForm"]["phone"].value;
if (name == "") {
alert("Please enter your name.");
return false;
}
if (age == "") {
alert("Please enter your age.");
return false;
}
if (isNaN(age)) {
alert("Age must be a number.");
return false;
}
if (email == "") {
alert("Please enter your email.");
return false;
}
if (phone == "") {
alert("Please enter your phone number.");
return false;
}
if (isNaN(phone)) {
alert("Phone number must be a number.");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Student Record Form</h1>
<form name="studentForm" onsubmit="return validateForm()" action="submit_data.php" method="post">
<label for="name">First Name:</label>
<input type="text" name="name"><br>
<label for="age">Last Name:</label>
<input type="text" name="age"><br>
<label for="email">Date of Birth:</label>
<input type="email" name="email"><br>
<label for="email">Email:</label>
<input type="email" name="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone"><br>
<input type="submit" value="Submit"> <input type="Reset" value="Reset">
</form>
</body>
</html>
The validateForm() function is called when the form is submitted. It checks that all the fields are filled in and that the age and phone fields contain numbers. If any of the validations fail, an alert message is displayed and the function returns false, preventing the form from being submitted. If all validations pass, the function returns true, allowing the form to be submitted.
Note that this is just a basic example of form validation, and there are many other types of validation that could be added depending on the specific requirements of the student record system. Additionally, the form action (submit_data.php) would need to be updated to point to the correct server-side script for actually processing the form data.
No comments:
Post a Comment