JavaScript no response with validation

Question

I am new to javascript and I am attempting to create a simple form validation. When I hit the submit button nothing happens. I have been looking at examples for a while and I cannot seem to figure out where I am going wrong. Any suggestions:

Right after this post I am going to break it all down and start smaller. But in the meantime I figured another set of eyes couldn't hurt and it is very possible I am doing something horribly wrong.

HTML:

<form name="form" action="index.html" onsubmit="return construct();" method="post">
    <label>Your Name:<span class="req">*</span> </label>
    <input type="text" name="name"  /><br />
    <label>Company Name:<span class="req">*</span> </label>
    <input type="text" name="companyName" /><br />
    <label>Phone Number:</label> 
    <input type="text" name="phone" /><br />
    <label>Email Address:<span class="req">*</span></label> 
    <input type="text" name="email" /><br />
    <label>Best Time to be Contacted:</label> 
    <input type="text" name="TimeForContact" /><br />
    <label>Availability for Presenting:</label> 
    <input type="text"  name="aval" /><br />
    <label>Message:</label>
    <textarea name="message" ROWS="3" COLS="30"></textarea>
    <label>First Time Presenting for AGC?:<span class="req">*</span></label> 
    <input type="radio" name="firstTime" value="Yes" id="yes" /><span class="small">Yes</span>
    <input type="radio" name="firstTime" value="No" id="no"/><span class="small">No</span><br /><br />
    <input type="submit" name="submit" value="Sign-Up" />
</form> 

JavaScript:

function construct() {
    var name = document.forms["form"]["name"].value;
    var companyName = document.forms["form"]["companyName"].value;
    var email = document.forms["forms"]["email"].value;
    var phone = document.forms["forms"]["phone"].value;
    var TimeForC = document.forms["forms"]["TimeForContact"].value;
    var availability = document.forms["forms"]["aval"].value;

    if (validateExistence(name) == false || validateExistence(companyName) == false)
        return false;
    if (radioCheck == false)
        return false;
    if (phoneValidate(phone) == false)
        return false;
    if (checkValidForOthers(TimeForC) == false || checkValidForOthers(availability) == false)
        return false;
    if (emailCheck(email) == false)
        return false;
}
function validateExistence(name) {
    if (name == null || name == ' ')
        alert("You must enter a " + name + " to submit! Thank you."); return false;
    if (name.length > 40)
        alert(name + " is too long for our form, please abbreviate."); return false;
}

function phoneValidate(phone) {
    if (phone.length > 12 || phone == "" || !isNaN(phone))
        alert("Please enter a valid phone number."); return false;
}

function checkValidForOthers(name) {
    if (name.length > 40)
        alert(name + " is too long for our form, please abbreviate."); return false;
}

function messageCheck(message) {
    var currentLength = name.length;
    var over = 0;
    over = currentLength - 200;

    if (name.length > 200)
        alert(name + " is too long for our form, please abbreviate. You are " + over + " characters over allowed amount"); return false;
}

function radioCheck() {
    if (document.getElementById("yes").checked == false || document.getElementById("no").checked == false)
        return false;
}

function emailCheck(email) {
    var atpos = email.indexOf("@");
    var dotpos = email.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}

Am I calling my functions incorrectly? I honestly am not sure where I am going wrong.
I don't understand how to debug my code... I am using chrome and I am not receiving any errors in the console. Is there a way to set breakpoints to step through the javascript?

I realize i just threw a lot of code up there so thanks in advance for sifting through it.

Answer 1

Here is mistake:

Replace var email = document.forms["forms"]["email"].value;

by var email = document.forms["form"]["email"].value;

There are lot of places in your js :

var email = document.forms["forms"]["email"].value;

var phone = document.forms["forms"]["phone"].value;

var TimeForC = document.forms["forms"]["TimeForContact"].value;

var availability = document.forms["forms"]["aval"].value;

where you mistyped form as forms.

Is there a way to set breakpoints to step through the javascript?

Yes there is a way to set breakpoints:

Refer following links in order to know the method to set break-point in debugger console in Chrome:

LINK 1

LINK 2

Answer 2

The following should fix the immediate problem:

function construct(form) {
  var 
    name = form["name"].value,
    companyName = form["companyName"].value,
    email = form["email"].value,
    phone = form["phone"].value,
    TimeForC = form["TimeForContact"].value,
    availability = form["aval"].value
  ;
  if (!validateExistence(name) || !validateExistence(companyName)) {
    return false;
  }
  else if (!radioCheck) {
    return false;
  }
  else if (phoneValidate(phone) == false) {
    return false;
  }
  else if (!checkValidForOthers(TimeForC) || !checkValidForOthers(availability)) {
    return false;
  }
  else if (emailCheck(email) == false) {
    return false;
  }
}

You had a typo in the form document.forms["forms"], where 'forms' doesn't exist. Instead of always traversing objects to get to your form, you can use this to pass the current element into your function.

<form action="index.html" onsubmit="return construct(this);" method="post">

If you're starting out it's also a good idea to make sure you set all your braces (i.e. curly brackets) as this will help you avoid getting confused with regards to alignment and brace matching.

Answer 3

Your first problem is the forms where you meant form. See here

But you have other problems with your validation code, for example:

if (name == null || name == ' ')

Here you are checking if name is null or name is a single space. I assume you wanted to check if the field is blank, but a completely empty string will evaluate as false in your condition, as will two spaces. What you probably want to do is something like this:

if (!name) {
    // tell the user they need to enter a value
}

Conveniently (or sometimes not), Javascript interprets null, an empty string, or a string full of white space as false, so this should cover you.

You also have a whole host of other problems, see this:

http://jsfiddle.net/FCwYW/2/

Most of the problems have been pointed out by others.

• You need to use braces {} when you have more than one line after an if statement.
• You need to return true when you pass you validation tests or Javascript will interpret the lack of a return value as false.
• Your radioCheck will only pass if both radio buttons are checked.
• You where checking that your phone number was NOT NaN (i.e. it is a number) and returning false if it was.

Answer 4

I would suggest learning some new debug skills. There are ways to break down a problem like this that will quickly isolate your problem:

• Commenting out code and enabling parts bit by bit
• Using a debugger such as Firebug
• Using console.log() or alert() calls
• Reviewing your code line-by-line and thinking about what it is supposed to do

In your case, I would have first seen if name got a value with a console.log(name) statement, and then moved forward from there. You would immediately see that name does not get a value. This will lead to the discovery that you have a typo ("forms" instead of "form").

Some other errors in your code:

• You are returning false outside of your if statement in validateExistence():

  if (name == null || name == ' ')
      alert("You must enter a " + name + " to submit! Thank you."); 
      return false;
  

  In this case, you do not have brackets {} around your statement. It looks like return false is in the if(){}, but it is not. Every call to this code will return false. Not using brackets works with a single call, but I don't recommend it, because it leads to issues like this when you add additional code.

• In the same code, you are using name as the field name when it is really the value of the field:

  alert("You must enter a " + name + " to submit! Thank you."); return false;
  

  You really want to pass the field name separately:

  function validateExistence(name, field) {
      if (name == null || name == ' ') {
          alert("You must enter a " + field + " to submit! Thank you."); 
          return false;
      } else if (name.length > 40)
          alert(field + "value is too long for our form, please abbreviate."); 
          return false;
      }
  }
  

• You are not calling radioCheck() because you are missing parentheses:

  if (radioCheck == false)
  

• In radioCheck(), you are using || instead of &&. Because at least 1 will always be unchecked by definition, you will always fail this check:

  if (document.getElementById("yes").checked == false || document.getElementById("no").checked == false) return false;
  

• And more...

My suggestion is to enable one check at a time, test it, and once it works as expected, move on to the next. Trying to debug all at once is very difficult.