Question

我对一个小的输入表单进行了一些自定义验证，它检查是否需要一个字段。如果这是必填字段，则如果没有值，它将提醒用户。目前，它将验证除复选框以外的所有其他输入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <div class="ss-item-required">
      <label>Question: What is your name?</label>
      <input type="text" name="name" id="name"></input>
    </div>
    <div class="ss-item-required">
      <label>Question: What is your email?</label>
      <input type="text" name="email" id="email"></input>
    </div>
    <div class="ss-item-required">
      <label>Question: What is your address?</label>
      <textarea name="address" rows="8" cols="75" id="address"></textarea>
    </div>
     <div class="ss-item-required">
      <label>Do you agree to out terms?</label>
      <input type="checkbox" name="Check_0">
    </div>

    <a href="#" onclick="formcheck(); return false">Submit</a>
 </form>
 
 <script>
 function formcheck() {
  var fields = $(".ss-item-required")
        .find("select, textarea, input").serializeArray();
  
  $.each(fields, function(i, field) {
    if (!field.value)
      alert(field.name + ' is required');
   }); 
  console.log(fields);
}
 </script>

如果任何人都可以弄清楚如何包括复选框的验证，将不胜感激。

Answer 1

有多种方法可以确定这一点：

检查仅查询选中复选框的JQuery包装集的length，看看它是否为1：

if($("input[name='Check_0']:checked").length === 1)

检查checked的DOM元素本身的false属性（这是我在下面显示的内容）。要从JQuery包装的集合中提取DOM元素，您可以将索引传递给包装的集合（在这种情况下为[0]），该索引仅提取一项作为DOM元素，然后可以使用标准的DOM API

if(!$("input[type='checkbox']")[0].checked)

注意：重要的是要了解，任何真正想要的人都可以轻松绕过所有客户端验证。就这样，你应该始终在服务器上进行第二轮验证，正在接收数据。

仅供参考：您有一些无效的HTML：input元素没有结束标签，label元素也没有结束标签，您必须将标签“ for”的元素嵌套在{{ 1}}，或者必须将label属性添加到for并为其赋予label是“ for”元素的id的值。我已经在下面纠正了这两个问题：

label

个人（并且我对此并不孤单），在当今世界中，JQuery的使用已被过度使用。当它问世时，标准DOM API并不如它成熟现在，JQuery使DOM元素的选择和操作变得非常简单。那时，JQuery是天赐之物。

如今，DOM API已经成熟，而我们用来依赖JQuery的许多事情变得简单起来，而无需JQuery也可以轻松完成。这意味着您根本不必引用JQuery库（页面加载速度更快），并且代码遵循标准。

如果您有兴趣，这是没有JQuery的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <div class="ss-item-required">
      <label for="userName">Question: What is your name?</label>
      <input type="text" name="userName" id="userName">
    </div>
    <div class="ss-item-required">
      <label for="email">Question: What is your email?</label>
      <input type="text" name="email" id="email">
    </div>
    <div class="ss-item-required">
      <label for="address">Question: What is your address?</label>
      <textarea name="address" rows="8" cols="75" id="address"></textarea>
    </div>
     <div class="ss-item-required">
      <label for="Check_0">Do you agree to out terms?
        <input type="checkbox" name="Check_0">
      </label>
    </div>

    <a href="#" onclick="formcheck(); return false">Submit</a>
 </form>
 
 <script>
 function formcheck() {
  var fields = $(".ss-item-required")
        .find("select, textarea, input").serializeArray();
  
  $.each(fields, function(i, field) {
    if (!field.value){
      alert(field.name + ' is required');
    }
  }); 
  
  // Check to see if the input is a checkbox and if it's checked
  if(!$("input[type='checkbox']")[0].checked){
      alert("You must agree to the terms to continue.");
  }
}
 </script>

Answer 2

尽管一些答案已经提供了解决方案，但我还是决定提供我的解决方案，该方法将验证您表单中的所有必需输入，而不管其是否为复选框（保持each循环）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <div class="ss-item-required">
      <label>Question: What is your name?</label>
      <input type="text" name="name" id="name">
    </div>
    <div class="ss-item-required">
      <label>Question: What is your email?</label>
      <input type="text" name="email" id="email">
    </div>
    <div class="ss-item-required">
      <label>Question: What is your address?</label>
      <textarea name="address" rows="8" cols="75" id="address"></textarea>
    </div>
     <div class="ss-item-required">
      <label>Do you agree to out terms?</label>
      <input type="checkbox" name="Check_0">
    </div>

    <a href="#" onclick="formcheck(); return false">Submit</a>
 </form>
 
 <script>
 function formcheck() {
  var fields = $(".ss-item-required")
  $.each(fields, function(i, field) {
    
    field=$(field).find('input, select, textarea')[0]
    if (!field.value || (field.type=='checkbox' && !field.checked))
      alert(field.name + ' is required');
   }); 
}
 </script>

问题是：

serializeArray()会尝试从您的复选框中获取值，并且由于它不返回任何内容，因此该复选框输入从未添加到字段中！
复选框没有属性value，而是checked

自定义javascript来检查是否需要字段

2 个答案: