Javascript code won't work on my form

Question

I am working on a form but my form is not working whenever I press submit. I am trying to evaluate whether sections of the form is empty, the email, and the number of digits for a user id. When I press submit nothing happens and I have been stuck like this for a while. FYI I have to use plain js and html.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Student Login Form</title>
  <link rel='stylesheet' href='studentform.css' type='text/css' />
  <script src="studentform.js"></script>
</head>
<body onload="document.form.studentid.focus();">
  <h1>Student Login</h1>
  <div class="container">
      <form name="form" onsubmit="return validate();">
      <label for="studentid">Student ID:</label>
      <input type="number" name="studentid" maxlength="8" id="studentid" required />

      <label for="name">Name:</label>
      <input type="text" name="name" size="50"  id="name" required />

      <label for="email">Email:</label>
      <input type="email" name="email" size="50" id="email" required />

      <label for="emailconfirm">Email Confirmation:</label>
      <input type="checkbox" name="emailconfirm" checked /><span>Send an email confirmation</span>

      <select>
      <option selected>Student Registration</option>
      <option>Transcript</option>
      </select>

      <input type="submit" name="submit" value="Submit" />
  </form>
</div>

`

Js.

function validate(){
     var studentid = document.getElementById("studentid").value;
     var name = document.getElementById("name").value;
     var email = document.getElementById("email").value;
    if(nameEmpty(name))
    {
    if(studentidEmpty(studentid))
    {
    if(emailEmpty(email))
    {
    if(digitCheck(studentid))
    {
    if checkEmail(email)
    {
    verify(name, studentid)
    }
    }
    }
    }
    }
    return false;
    }

function studentidEmpty(studentid){
  if ( studentid == "" ){
    alert("Please provide your student id!");
    studentid.focus();
    return false;
  }
}

function nameEmpty(name){
if ( name == "" ){
    alert("Please provide your name!");
    name.focus() ;
    return false;
 }
}

function emailEmpty(email){
 if( email == "" ){
    alert( "Please provide your email!" );
    email.focus();
    return false;
 }

function digitCheck(studentid){
  var ok = studentid.search(".{8,}");
  if (ok!=0){
    alert("Please provide ID with 8 digits.");
    return false;
  }
}

function checkEmail(email) {
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email.value)) {
      alert('Please provide a valid email address');
      email.focus;
      return false;
 }
}

function verify(name, studentid){
  var personList = [["Joe",11111111],["Tammy",22222222],["Jones",33333333]];
  for (list in personList) {
    if (name in list && studentid in list){
      alert("Welcome! An email verification with be sent soon.");
      return true;
    } else{
      alert("Student Name and/or ID not found in records");
      return false;
  }
}
}
}

Can you post the complete HTML and perhaps even an example using JSFiddle or Codepen would be much better to solve your issue faster. — Nikhil Nanjappa, Feb 24 '17 at 13:28
Sorry for the formatting errors http://codebins.com/bin/4ldqoqb/latest — holaworld, Feb 24 '17 at 13:29
Typo: `if checkEmail(email)` needs to be `if (checkEmail(email))` - You should be looking in the F12 error console to diagnose errors like this. — Alex K., Feb 24 '17 at 13:29
Deleting all of the code (and most of the text) in the question is unlikely to help get this question reopened... — Heretic Monkey, Feb 24 '17 at 19:10

score 1 · Answer 1 · edited May 23 '17 at 12:25

I think you should fix this line:

if checkEmail(email)

to

if (checkEmail(email))

you have forgotten the parentheses.

Edit:

I have completely fixed your code. Your errors:

you have forgotten to add else clauses for your field checkers, they were only returning false if the validation failed
your checking "if array contains value" was wrong, I have added a method from here
you were trying to focus on the values, not tags
you were trying to test email value from the "value of the value" not "value"

function validate() {
 var studentid = document.getElementById("studentid").value;
 var name = document.getElementById("name").value;
 var email = document.getElementById("email").value;
 if (nameEmpty(name)) {
  if (studentidEmpty(studentid)) {
   if (emailEmpty(email)) {
    if (digitCheck(studentid)) {
     if (checkEmail(email)) {
      return verify(name, studentid);
     }
    }
   }
  }
 }
 return false;
}

function studentidEmpty(studentid) {
 if (studentid == "") {
  alert("Please provide your student id!");
  document.getElementById("studentid").focus();
  return false;
 } else {
    return true;
  }
}

function nameEmpty(name) {
 if (name == "") {
  alert("Please provide your name!");
  document.getElementById("name").focus();
  return false;
 } else {
    return true;
  }
}

function emailEmpty(email) {
 if (email == "") {
  alert("Please provide your email!");
  document.getElementById("email").focus();
  return false;
 } else {
    return true;
  }
}

 function digitCheck(studentid) {
  var ok = studentid.search(".{8,}");
  if (ok != 0) {
   alert("Please provide ID with 8 digits.");
   return false;
  } else {
      return true;
    }
 }

 function checkEmail(email) {
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if (!filter.test(email)) {
   alert('Please provide a valid email address');
   email.focus;
   return false;
  } else {
      return true;
    }
 }

 function verify(name, studentid) {
  var personList = [
   ["Joe", 11111111],
   ["Tammy", 22222222],
   ["Jones", 33333333]
  ];
  for (list in personList) {
   if (contains.call(list, name) && contains.call(list, studentid)) {
    alert("Welcome! An email verification with be sent soon.");
    return true;
   }
  }
    alert("Student Name and/or ID not found in records");
  return false;
 }
  
  var contains = function(needle) {
    // Per spec, the way to identify NaN is that it is not equal to itself
    var findNaN = needle !== needle;
    var indexOf;

    if(!findNaN && typeof Array.prototype.indexOf === 'function') {
        indexOf = Array.prototype.indexOf;
    } else {
        indexOf = function(needle) {
            var i = -1, index = -1;

            for(i = 0; i < this.length; i++) {
                var item = this[i];

                if((findNaN && item !== item) || item === needle) {
                    index = i;
                    break;
                }
            }

            return index;
        };
    }

    return indexOf.call(this, needle) > -1;
};

<div>
  <form>
      <label for="name">Name:</label>
      <input type="text" name="name" size="50"  id="name" required />
      
      <label for="studentid">Student ID:</label>
      <input type="number" name="studentid" maxlength="8" id="studentid" required />

      <label for="email">Email:</label>
      <input type="email" name="email" size="50" id="email" required />

      <label for="emailconfirm">Email Confirmation:</label>
      <input type="checkbox" name="emailconfirm" checked /><span>Send an email confirmation</span>

      <select>
      <option selected>Student Registration</option>
      <option>Transcript</option>
      </select>

      <input onclick="return validate();" type="submit" name="submit" value="Submit" />
  </form>
</div>

I fixed my typo, but it is still not giving me the right alerts so my js has an error. — holaworld, Feb 24 '17 at 13:41
I just understood that you want your code to be fixed, the logic belongs to you. Anyway, I will try to fix. — Bahadir Tasdemir, Feb 24 '17 at 13:46

score 0 · Accepted Answer · answered Feb 24 '17 at 13:41

Validate function always return false !! It shouldn't.

function validate(){
    var studentid = document.getElementById("studentid").value;
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    return nameEmpty(name) && studentidEmpty(studentid) && emailEmpty(email) && digitCheck(studentid) && checkEmail(email) && verify(name, studentid);
}

Then be sure your form looks like :

<form name="form" onsubmit="return validate();" action="javascript:void(0)">
</form>

And your autofocus input to look like :

<input type="number" name="studentid" maxlength="8" id="studentid" required autofocus/>

The changes are still not letting me show alerts for displaying validation errors — holaworld, Feb 24 '17 at 13:55

score 0 · Answer 3 · answered Feb 24 '17 at 13:59

You're forgetting the parentheses. It is also wrong to start and end each function, try using the code below with these corrections.

function validate() {
  var studentid = document.getElementById("studentid").value;
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  if (nameEmpty(name)) {
      if (studentidEmpty(studentid)) {
            if (emailEmpty(email)) {
                if (digitCheck(studentid)) {
                    if (checkEmail(email)) {
                        verify(name, studentid)
                    }
                }
            }
      }
  }
  return false;
}

function studentidEmpty(studentid) {
  if (studentid == "") {
    alert("Please provide your student id!");
    studentid.focus();
    return false;
  }
}

function nameEmpty(name) {
  if (name == "") {
    alert("Please provide your name!");
    name.focus();
    return false;
  }
}

function emailEmpty(email) {
  if (email == "") {
    alert("Please provide your email!");
    email.focus();
    return false;
  } 
}

function digitCheck(studentid) {
  var ok = studentid.search(".{8,}");
  if (ok != 0) {
    alert("Please provide ID with 8 digits.");
    return false;
  }
}

function checkEmail(email) {
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if (!filter.test(email.value)) {
    alert('Please provide a valid email address');
    email.focus;
    return false;
  }
}

function verify(name, studentid) {
  var personList = [
    ["Joe", 11111111],
    ["Tammy", 22222222],
    ["Jones", 33333333]
  ];
  for (list in personList) {
    if (name in list && studentid in list) {
      alert("Welcome! An email verification with be sent soon.");
      return true;
    } else {
      alert("Student Name and/or ID not found in records");
      return false;
    }
  }
}

Javascript code won't work on my form

3 Answers3