Student Registration Form validation in JavaScript

Question

asked Feb 20, 2021 in Web Technology by Jake (7k points)

I have been working on a student registration form validation in JavaScript and it is not working.

Please see my code and suggest the changes to make it work.

<!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>

1 Answer

dhanush · Answer 1 · 2021-02-20T06:15:18+0000

You have inverted the use of .test method and really should have used regex on the left.

Here is your code with changes:

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;
            }
        }

Inside the onsubmit you could remove the return and just use the method which will directly return true or false like this:

<form name="form1" method="post" onsubmit="check();">

Want to be a web developer? Check out the full stack developer course from Intellipaat.

Student Registration Form validation in JavaScript

1 Answer

Related questions

Browse Categories