Student Registration Form Validation in JavaScript
Question
I have been working on a student registration form validation in JavaScript but it doesn't work at all. I have even tried writing all sorts of log statements for debugging but it seems the functions aren't being invoked at all(?).
It'd be helpful if you guys could let me know where I am going wrong with this. Here is the code :
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> function allLetter() { var name = document.querySelector("#name").value; var letters = /^[A-Za-z]*$/; if (name.test(letters)) { return true; } else { alert("Not a valid Name"); return false; } } function rollnumber() { var roll = document.querySelector("#roll").value; var phoneno = /^\\d{7}$/; if (roll.test(phoneno)) { 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="return 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>
3 answers
solution1
2 2017-05-05 17:15:17
here is my solution no javascript needed just html
<h2>STUDENT REGISTRATION FORM</h2> <form name="form1" method="post"> <label for="name">Name :</label> <input type="text" id="name" pattern="[A-Za-z\\s]+" required><br> <label for="roll">Roll No :</label> <input type="text" id="roll" pattern="[0-9]+" required><br> <label for="date">DOB :</label> <input type="date" id="date" required><br> <input type="submit" value="Register"> </form>
solution2
1 ACCPTED 2017-05-05 17:09:25
You inverted the use of .test method. You should use regex on the left, because .test is a method of regexes. Here your code working:
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;
}
}
Then inside the onsubmit event you can remove the return and just use the method, the method will return directly true or false
<form name="form1" method="post" onsubmit="check();">
solution3
1 2017-05-05 17:12:24
I think you should use the .test() method, like here .
So regex first, instead of name.test(letters) you should use letters.test(name) .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.