仅使用javascript动态验证表单

Question

所以我正在研究这个项目。我收到了一个我无法编辑的HTML文件。我必须严格使用JavaScipt访问DOM元素 - 没有JQuery，只需JavaScript。现在我正在进行验证。到目前为止，当您加载页面并单击提交时，第一个验证工作。但是，我还希望它循环遍历if语句，以验证用户是否在年龄输入字段中输入值。我在下面附上了我的代码。最后我想要发生的是当用户输入他们的年龄时，他们将能够添加一个列表，一旦点击提交按钮，我将需要动态创建。但是，如果他们没有输入年龄或输入非数字编号，则会显示错误。我怎样才能做到这一点？

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

Answer 1

不要使用提交按钮的onclick事件。相反，使用表单本身的onsubmit事件。在为事件分配函数时，也不要使用括号。最后，getElementsByTagName函数返回一个集合，因此您需要选择您的表单。假设您只有一个表单（或者您的表单是页面上的第一个表单）：

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

同样，你的checkAge函数的第一行应该是：

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

以下是修复的完整代码：

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>

编辑您在评论中询问：如何使用JavaScript将HTML验证属性添加到输入框？预期的结果是这样的：

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

请注意，HTML验证仅适用于现代浏览器。您可以使用以下代码轻松完成此操作：

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

以下是此解决方案的完整代码：

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>