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: http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method — Teemu, Dec 29 '17 at 18:43
I can't edit the html document...anyway to append that through Javascript? — ICode4Fun, Dec 29 '17 at 18:45
What's the difference between the "Add" button and the "Submit" button? Is the intent to add multiple ages to a list before submitting? — showdev, Dec 29 '17 at 18:52
The add button will be used to add additional ages and members to the list after the first submit. — ICode4Fun, Dec 29 '17 at 18:59

Racil Hilan · Accepted Answer · 2017-12-29T19:08:11.063

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! — ICode4Fun, Dec 29 '17 at 18:57
You can see my updated answer for an alternative solution to add HTML validation attributes as suggested in the comments. — Racil Hilan, Dec 29 '17 at 19:09
Thank you, that works great! You have been very helpful today. I can finally move on to the next step. — ICode4Fun, Dec 29 '17 at 19:16

Dynamically validating a form using only javascript

1 Answers1