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

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，但是如何解决循环中的不同索引？而且，仅当遇到选择时，才应进行此比较。它不一定存在，具体取决于形式。

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

I。收集所有输入并从提交的表单中选择（如果有的话-有些表单将不会选择）

II。确保“必需”类的所有输入都不为空（除非有相应的选择，在这种情况下，请参见下面的III）

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

任何人都能提供的帮助将不胜感激！

1 个答案:

答案 0 :(得分：1)

这是一个功能，可以完全满足您的要求，并且可以处理您想要的任何形式，只要它们具有相同的HTML结构即可。

注释：

• 我建议尽可能避免内联事件监听器 下面的代码段我使用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>

希望我进一步推动了你。

  

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

相关问题

• 要么验证，要么验证
• 验证选择框：“required”属性，HTML5
• 验证输入是列表还是单个元素列表的列表
• 禁用所需输入时，角度形式无效
• 表单验证需要两个字段或第三个字段
• 创建text-INPUT字段或SELECT OPTION（HTML5）
• 在表单中生成x或y属性
• GraphQL - ＆＃39;要么/或＆＃39;用于多个必需的输入字段
• 必需参数 - 或者/或
• 需要“选择”或“输入”时验证表单

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

这是一个功能，可以完全满足您的要求，并且可以处理您想要的任何形式，只要它们具有相同的HTML结构即可。

注释：

• 我建议尽可能避免内联事件监听器 下面的代码段我使用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>

希望我进一步推动了你。

  

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