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>

Try to actually add an event listener via js instead of in lining the onsubmit handler. I've seen something like this before and believe it should fix it — jas7457, May 05 '17 at 17:07

score 2 · Answer 1 · answered May 05 '17 at 17:15

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>

score 1 · Accepted Answer · answered May 05 '17 at 17:09

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();">

score 1 · Answer 3 · edited May 23 '17 at 11:47

1

I think you should use the .test() method, like here.

So regex first, instead of name.test(letters) you should use letters.test(name).

edited May 23 '17 at 11:47

Community

1
1

answered May 05 '17 at 17:12

Hexiler

213
2
12

Student Registration Form Validation in JavaScript

3 Answers3