仅使用 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>

EDIT你在cmets中问：如何使用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>