在需要“选择”或“输入”时验证表单

Question

我有一个页面包含多个不同的表单，当一个表单被提交时，我使用下面的函数从该表单中收集所有输入，并检查是否有空值：

function validateForm(form) {
  var inputs = form.getElementsByTagName('input');
  var selects = form.getElementsByTagName('select');
  var errors = 0;

  for (var i = 0; i < inputs.length; i++) {
    if(inputs[i].classList.contains('required')) {    
      if(inputs[i].value === "") {
        inputs[i].classList.add("warning");
        errors++;
      } else {
        inputs[i].classList.remove("warning");
      }
    }
  }
  if(errors) {
    return false;
  } else {
    return true;
  }
}

如果它找到一个空值，它会添加一个类“警告”，它只是给输入一个红色边框，然后返回 false，这样表单就不会被提交。

这是我遇到麻烦的地方：一些表单包含一个 和一个文本输入，其中一个必须填写，但不能同时填写，以及其他各种文本输入。我试图弄清楚如何修改上述函数来处理这个问题。

假设表单用于添加新产品。选择是用现有产品“类别”动态填充的，如果用户想要创建新类别，则输入文本。这是表单的简化版本：

    <form method = "post" onsubmit = "return validateForm(this)">
      <div class = "form-group">
        <label>Product Name</label>
        <input class = "form-control required" type = "text" name = "product" />
      </div>
      <div class = "form-group">
        <select class = "form-control required" id = "category" name = "category[]">
          <option value = "">Select Existing Category</option>
          <option value = "Shirts">Shirts</option>
          <option value = "Shoes">Shoes</option>
          <option value = "Pants">Pants</option>
        </select>
      </div>
      <div class = "form-group">
        <label>Create New Category</label>
        <input class = "form-control required" type = "text" name = "category[]" />
      </div>
      <div class = "form-group">
        <input class = "btn btn-primary" type = "submit" value = "Submit" />
      </div>
    </form>

由于我使用 for 循环遍历输入 - 选择和输入不会有相同的索引，所以我不能做这样的事情：

  if((selects[i].value === "" && inputs[i].value === "") || (selects[i].value !== "" && inputs[i].value !== "")) {
    // add the warning class to both
   }

我觉得答案在于使用 name 属性，即比较 selects.name 和 inputs.name，但是如何绕过循环中的不同索引？而且，它应该只在遇到选择时才进行比较。它不一定存在，取决于形式。

基本上，我需要修改我的函数来做到这一点：

我。从提交的表单中收集所有输入和选择（如果有 - 某些表单不会）

二。确保没有“必需”类的输入是空白的（除非有相应的选择，在这种情况下，请参阅下面的 III）

三。如果有选择，请找到具有相同“名称”的文本输入（不需要具有相同的名称，但我认为这是正确的方法）。其中之一，但不是两者，必须有一个值。如果两者都是空白，或者都有一个值，它们应该得到“警告”类；

任何人都可以提供任何帮助，我们将不胜感激！

Answer 1

这是一个函数，可以完全按照您的意愿进行操作，并且可以处理您想要的任何形式，只要它们具有相同的 HTML 结构。

注意事项：

• 我建议尽可能避免使用内联事件侦听器，在 下面的sn-p我用addEventListener方法附加submit 事件到文档中的所有表单，您可以将其更改为 如果需要，可以使用一些特定的表格。
• 我建议不要只为所需元素添加边框 您还可以添加一些文字来说明问题所在。

// getting all forms in the page you can also get specific forms based on their class-name
var forms = document.getElementsByTagName('form'),
  l = forms.length,
  i = 0;
// adding submit submit event listener to the referenced forms
for(; i < l; i++) {
  forms[i].addEventListener('submit', validateForm);
}


function validateForm(e) {
  var els = this.querySelectorAll('input.required'),
    len = els.length,
    err = false,
    c = 0,
    inpName = '';
  // checking if the form has a select, if so, allow only the select or the input to be filled
  var isSelect = this.getElementsByTagName('select');
  if(isSelect[0] !== undefined && isSelect[0] !== null) {
    var inp = isSelect[0].parentNode.nextElementSibling.querySelector('input.required');
    inpName = inp.name;
    if((isSelect[0].value == '' && inp.value.trim().length === 0) || (isSelect[0].value != '' && inp.value.trim().length > 0)) {
      err = true;
      isSelect[0].classList.add("warning");
      inp.classList.add("warning");
    } else {
      isSelect[0].classList.remove("warning");
      inp.classList.remove("warning");
    }
  }

  // iterate through the rest of the inputs and check for empty one, thus trimming them before checking
  for(; c < len; c++) {
    if(els[c].name !== inpName) {
      if(els[c].value.trim() == '') {
        err = true;
        els[c].classList.add("warning");
      } else {
        els[c].classList.remove("warning");
      }
    }
  }
  // based on the error variable, either submit the form or cancel submission
  (!err) ? this.submit():e.preventDefault();
}

.warning {
  border: 2px solid red;
}

<form method="post">
    <div class="form-group">
        <label>Product Name</label>
        <input class="form-control required" type="text" name="product" />
    </div>
    <div class="form-group">
        <select class="form-control required" id="category" name="category[]">
            <option value="">Select Existing Category</option>
            <option value="Shirts">Shirts</option>
            <option value="Shoes">Shoes</option>
            <option value="Pants">Pants</option>
        </select>
    </div>
    <div class="form-group">
        <label>Create New Category</label>
        <input class="form-control required" type="text" name="category[]" />
    </div>
    <div class="form-group">
        <input class="btn btn-primary" type="submit" value="Submit" />
    </div>
</form>

希望我把你推得更远。

您可能会收到一条消息：“自定义错误模块没有 识别此错误。”当您从 上面的 sn-p，这是由于 StackOverflow 的限制，因为他们 不允许/服务器端代码（StackOverflow 不允许表单 提交）。