Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (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

0 votes
by (13.1k points)

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.

Related questions

0 votes
1 answer
0 votes
1 answer
0 votes
0 answers
0 votes
1 answer
0 votes
1 answer

31k questions

32.8k answers

501 comments

693 users

Browse Categories

...