Dynamically validating a form using only javascript

Question

So I have this project I am working on. I was provided with an HTML file that I CAN NOT edit. I have to access the DOM elements strictly with JavaScipt -- no JQuery, just JavaScript. Right now I am working on the validation. So far when you load the page and click submit the first validation works. However, I also want it to loop through the if statement to validate if the user enters a value in the age input field. I've attached my code below. In the end what I want to happen is when a user enters their age they will be able to add it a list, once the submit button is clicked, that I will need to create dynamically. However, if they don't enter an age or enter in a non-numeric number it will display an error. How can I achieve that?

var form = document.getElementsByTagName('form');
form.method = "POST";
form.action = "form-handler";
document.getElementsByTagName('button').onclick = checkAge();

function checkAge() {

  var age = document.getElementsByName['age'];
  if (age == null || age.value === "") {
    alert("Age must be filled out");
    return false;
  } else {
    alert("You entered: " + age.value);
    return true;
  }

}

.debug {
  font-family: monospace;
  border: 1px solid black;
  padding: 10px;
  display: none;
}

<h1>Household builder</h1>
<div class="builder">
  <ol class="household"></ol>
  <form>
    <div>
      <label>Age
        <input type="text" name="age">
      </label>
    </div>
    <div>
      <label>Relationship
        <select name="rel">
          <option value="">---</option>
          <option value="self">Self</option>
          <option value="spouse">Spouse</option>
          <option value="child">Child</option>
          <option value="parent">Parent</option>
          <option value="grandparent">Grandparent</option>
          <option value="other">Other</option>
        </select>
      </label>
    </div>
    <div>
      <label>Smoker?
        <input type="checkbox" name="smoker">
      </label>
    </div>
    <div>
      <button class="add">add</button>
    </div>
    <div>
      <button type="submit" class="GapViewItemselected">submit</button>
    </div>
  </form>
</div>
<pre class="debug"></pre>

Here's my code pen for it too:

https://codepen.io/cfay1810/pen/QavNVL

Maybe the basics first: stackoverflow.com/questions/10693845/… — Teemu
– Teemu, Commented Dec 29, 2017 at 18:43
Why not use <input type="number" required min="0" max="120" />? — connexo
– connexo, Commented Dec 29, 2017 at 18:44

Racil Hilan · Accepted Answer · 2017-12-29 19:08:11Z

Don't use the onclick event of the submit button. Instead, use the onsubmit event of the form itself. Also don't use the parenthesis when you assign a function to the events. And finally, the getElementsByTagName function returns a collection, so you need to select your form. Assuming you only have one form (or your form is the first one on the page):

var form = document.getElementsByTagName('form')[0];
form.method = "POST";
form.action = "form-handler";
form.onsubmit = checkAge;

Similarly, the first line of your checkAge function should be:

var form = document.getElementsByTagName('form')[0];

Here is the complete code with the fixes:

var form = document.getElementsByTagName('form')[0];
form.method = "POST";
form.action = "form-handler";
form.onsubmit = checkAge;

function checkAge() {
  var age = document.getElementsByName('age')[0];
  if (age == null || age.value === "") {
    alert("Age must be filled out");
    return false;
  } else {
    alert("You entered: " + age.value);
    return true;
  }
}

.debug {
  font-family: monospace;
  border: 1px solid black;
  padding: 10px;
  display: none;
}

<h1>Household builder</h1>
<div class="builder">
  <ol class="household"></ol>
  <form>
    <div>
      <label>Age
        <input type="text" name="age">
      </label>
    </div>
    <div>
      <label>Relationship
        <select name="rel">
          <option value="">---</option>
          <option value="self">Self</option>
          <option value="spouse">Spouse</option>
          <option value="child">Child</option>
          <option value="parent">Parent</option>
          <option value="grandparent">Grandparent</option>
          <option value="other">Other</option>
        </select>
      </label>
    </div>
    <div>
      <label>Smoker?
        <input type="checkbox" name="smoker">
      </label>
    </div>
    <div>
      <button class="add">add</button>
    </div>
    <div>
      <button type="submit" class="GapViewItemselected">submit</button>
    </div>
  </form>
</div>
<pre class="debug"></pre>

EDIT You asked in the comments: How to add HTML validation attributes to the input box using JavaScript?. The intended result is something like this:

<input type="number" required min="0" max="120" />

Note that HTML validation only works in modern browsers. You can easily do that with code like this:

var age = document.getElementsByName('age')[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

Here is the complete code with this solution:

var age = document.getElementsByName('age')[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

.debug {
  font-family: monospace;
  border: 1px solid black;
  padding: 10px;
  display: none;
}

<h1>Household builder</h1>
<div class="builder">
  <ol class="household"></ol>
  <form>
    <div>
      <label>Age
        <input type="text" name="age">
      </label>
    </div>
    <div>
      <label>Relationship
        <select name="rel">
          <option value="">---</option>
          <option value="self">Self</option>
          <option value="spouse">Spouse</option>
          <option value="child">Child</option>
          <option value="parent">Parent</option>
          <option value="grandparent">Grandparent</option>
          <option value="other">Other</option>
        </select>
      </label>
    </div>
    <div>
      <label>Smoker?
        <input type="checkbox" name="smoker">
      </label>
    </div>
    <div>
      <button class="add">add</button>
    </div>
    <div>
      <button type="submit" class="GapViewItemselected">submit</button>
    </div>
  </form>
</div>
<pre class="debug"></pre>

Thank you, wow I can't believe that was all I was missing! I've been up for days trying to figure it out. I wish I could vote this up, but I just started on here. When I do get my reputation up I'll be sure to come back here. Thanks again!
You can see my updated answer for an alternative solution to add HTML validation attributes as suggested in the comments.
Thank you, that works great! You have been very helpful today. I can finally move on to the next step.

Collectives™ on Stack Overflow

Dynamically validating a form using only javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related