Student form is used to get the details about the student and store them in the database for use. Form can have multiple fields but some are mandatory, Like the name, roll number, date of birth, etc. When use filling the data on the form there is a chance of putting the wrong data.
If data filled wrong then it will be problem in database, because there is filed defined with type (texts, INT, string etc.).
JavaScript will help to prevent at earlier stage to verify the data type and validation of it.
Example of the student registration form in HTML with JavaScript validation
The following is the HTML structure (Name, Roll no, and date of birth) for the student registration form. You can add more input fields in it, with the mentioned class (and ids structure).
JavaScript regular expression is used in Example.
Note: Its simple HTML form without CSS, you to your own style and designs.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function allLetter() {
var name = document.querySelector("#name").value;
var letters = /^[A-Za-z]*$/;
if (letters.test(name)) {
return true;
} else {
alert("Not a valid Name");
return false;
}
}
function rollnumber() {
var roll = document.querySelector("#roll").value;
var phoneno = /^\d{7}$/;
if (phoneno.test(roll)) {
return true;
} else {
alert("Not a valid Roll Number");
return false;
}
}
function date() {
var date = document.querySelector("#date").value;
if (!date) {
return true;
}
else {
alert("Empty Date");
return false;
}
}
function check() {
var t1 = allLetter();
var t2 = rollnumber();
var t3 = date();
console.log(t1);
console.log(t2);
console.log(t3);
if (t1 && t2 && t3) {
alert("Registration Successful");
return true;
} else {
alert("One or More Fields are incorrectly set");
return false;
}
}
</script>
</head>
<body>
<h2>STUDENT REGISTRATION FORM</h2>
<form name="form1" method="post" onsubmit="check();">
<label for="name">Name :</label>
<input type="text" id="name"><br>
<label for="roll">Roll No :</label>
<input type="text" id="roll"><br>
<label for="date">DOB :</label>
<input type="date" id="date"><br>
<input type="submit" value="Register">
</form>
</body>
</html>Output:
Do comment if you have any doubts and suggestion on this tutorial.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version