CODEWITHSUNDEEP
javascriptformsvalidation
Ph1shPhryd
Ph1shPhryd

Reputation: 109

Form Validation JavaScript - No Alert Appearing

I am having troubles with the form validation on my form. I have searched around and have tried a few things but have not found a solution. I am still learning JavaScript so I am sure it's something wrong with that. Below is my code.

HTML

<section>
<p>Please type in your information so I can send you the newsletter.<br>
Required values are marked by an asterisk (*)</p>     
<form id="newsletter" onsubmit="return validateForm()" method "post">
<fieldset id="personal">
    <legend>Personal Information</legend>
<label for="name">Name: *</label>
<input type="text" name="name" id="name" size="40"> 
<br>
<label for="eMail">E-mail Address: *</label>
<input type="text" name="eMail" id="eMail">
<br>
<label for="favBeer">Favorite Beer Style:</label>
<select name="favBeer" id="favBeer">
    <option value="IPA">IPA</option>
    <option value="Saison">Saison</option>
    <option value="Porter">Porter</option>
    <option value="Pilsner">Pilsner</option>
    <option value="Hefeweizen">Hefeweizen</option>
    <option value="Stout">Stout</option>
    <option value="Other">Other</option>
    </select>
<br>
<label for="comments"> Additional Information:<label>
<textarea name="comments" id="comments" cols="55" rows="5"></textarea>  
</fieldset>
</section>

JavaScript

function validateForm() {
    var name = document.getElementById("name");
    if(nameValid(name)){
        return true;
    }
    return false;
}

function nameValid(name) {
    var name_length = name.length;
    if (name_length == "") {
        alert("Name is required");
        name.focus();
        return false;
    }
return ture;
}

Upvotes: 0

Views: 83

Answers (2)

Marc
Marc

Reputation: 11613

You need to check the value of the name element, not just the element itself. I.e.:

document.getElementById("name").value

You also need to compare length properly as a numeric value, as in this updated function:

function nameValid(name) {
    var name_length = name.length;
    alert(name_length);
    if (name_length < 1) {
        alert("Name is required");
        //name.focus();
        return false;
    }
    return true;
}

Fiddle here include an extra alert: http://jsfiddle.net/799vymrz/

(although console.log is typically more helpful than alert for values you're debugging; you'll need to view your browser console to see the output of console.log)

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

There are a few issues:

  1. ture should be true
  2. You don't close your form tag
  3. There's no submit button
  4. You're comparing a string's length to "", instead of to a number.

But mainly, you're trying to take the length of an input (name), instead of the length of its value.

Instead:

function validateForm() {
  var name = document.getElementById("name");
  if (nameValid(name)) {
    return true;
  }
  return false;
}

function nameValid(name) {
  var name_length = name.value.length;
  if (name_length == 0) {
    alert("Name is required");
    name.focus();
    return false;
  }
  return true;
}
<section>
  <p>Please type in your information so I can send you the newsletter.
    <br>Required values are marked by an asterisk (*)</p>
  <form id="newsletter" onsubmit="return validateForm()" method "post">
    <fieldset id="personal">
      <legend>Personal Information</legend>
      <label for="name">Name: *</label>
      <input type="text" name="name" id="name" size="40">
      <br>
      <label for="eMail">E-mail Address: *</label>
      <input type="text" name="eMail" id="eMail">
      <br>
      <label for="favBeer">Favorite Beer Style:</label>
      <select name="favBeer" id="favBeer">
        <option value="IPA">IPA</option>
        <option value="Saison">Saison</option>
        <option value="Porter">Porter</option>
        <option value="Pilsner">Pilsner</option>
        <option value="Hefeweizen">Hefeweizen</option>
        <option value="Stout">Stout</option>
        <option value="Other">Other</option>
      </select>
      <br>
      <label for="comments">Additional Information:
        <label>
          <textarea name="comments" id="comments" cols="55" rows="5"></textarea>
    </fieldset>
    <input type="submit">
  </form>
</section>

Upvotes: 1

Related Questions