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

问题描述 投票：1回答：2

我对一个小输入表单进行了一些自定义验证，检查是否需要字段。如果是必填字段，则在没有值的情况下向用户发出警报。目前它将验证复选框以外的所有输入。

<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>

如果有人能够弄清楚如何包含复选框的验证，那将非常感激。

javascript jquery html-form
2个回答
1
投票

尽管一些答案已经提供了解决方案，但我决定给出我的，这将验证表单中的所有必需输入，而不管是否为复选框（维护你的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
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元素没有结束标记，您必须在label中嵌套标签为“for”的元素，或者必须将for属性添加到label并给出它是id为“for”的元素的label的值。我已经纠正了以下两件事：

<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>

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

今天，DOM API已经成熟，我们用来依赖JQuery的很多东西都很容易，没有JQuery就可以轻松完成。这意味着您根本不必引用JQuery库（加载页面速度更快），并且您的代码遵循标准。

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

<form>
    <div class="ss-item-required">
      <label for="userName">Question: What is your name?</label>
      <input type="text" name="name" 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() {
  // Get all the required elements into an Array
  var fields = [].slice.call(document.querySelectorAll(".ss-item-required > *"));
  
   // Loop over the array:
   fields.forEach(function(field) {
     // Check for text boxes or textareas that have no value
     if ((field.type === "text" || field.nodeName.toLowerCase() === "textarea")
          && !field.value){
       alert(field.name + ' is required');
       // Then check for checkboxes that aren't checked
     } else if(field.type === "checkbox" && !field.checked){
       alert("You must agree to the terms to continue.");
     }
   }); 
}
 </script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.