Jquery - 避免空输入答案

【问题标题】：Jquery - Avoid empty inputsJquery - 避免空输入
【发布时间】：2012-02-17 19:48:34
【问题描述】：

我正在做一个多步骤表单（表单向导），我已将表单分成 5 个部分......所以 mi first div 是这样的：

<div class="data-1" style="display: block; ">
    <h3>Data</h3>
    <fieldset class="inputs">
    <ol>
      // 5 text inputs here
    </ol>
    </fieldset>
</div>

通过 jquery，我试图通过这样做来获取每个 div 的 5 个输入（其他 div 也有复选框、单选按钮）

 $(".data-1 :input").val();

为了知道每个 div 的输入值...但似乎我必须遍历 div 输入。

有没有办法可以防止任何空输入？或者有没有插件可以做到这一点？

【问题讨论】：

"...但似乎我必须遍历 div 输入。" 嗯？ div 元素不是 input 元素。
div 内的输入

标签： jquery jquery-plugins jquery-selectors

【解决方案1】：

看看 jQuery.Validate

http://docs.jquery.com/Plugins/Validation

  <script>
  $(document).ready(function(){
    $("#myForm").validate();
  });
  </script>

<form id="myForm" method="post">
   <p>
     <label for="cname">Name</label>
     <input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="curl">URL</label>
     <input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </form>

【讨论】：

乍一看，它似乎验证了整个表单......有没有办法验证它的一部分？
您的输入属性告诉验证器要验证哪些元素以及如何验证它们。它效果很好，我真的建议你仔细看看它！ :)
嗯...我会试一试，因为我不确定我是否可以这样做：$(".datos").validate();...我'将阅读文档

【解决方案2】：

$(".data-1 :input:not(:empty)").each(function()
{
// Iterating the not empty inputs
// $(this).val() contains the value of the current input
});

【讨论】：

不，:empty 检查没有子元素，而不是空白值。 input 元素定义为空（select 和 textbox 可能不是，但无论哪种方式，它都是关于具有非空值，没有子元素）。

【解决方案3】：

这可能是您正在寻找的东西......

$(".data-1 :input").each( function() {
   var val = $.trim($(this).val());
   if ( val != '' ) {
       // do stuff here...
   }
});

【讨论】：

文本输入效果很好，我会尝试使用复选框和单选按钮

【解决方案4】：

代码

$(".data-1 :input").val();

...将为您提供 first ".data-1" div 内的 first 输入元素的值。它不会给你所有的。

要获取所有的值，可以使用map（通常后面跟get）：

var values = $(".data-1 :input").map(function() {
    return $(this).val();
}).get();

这将为您提供一个值数组。

上面创建的数组将包含空白值。如果您想省略空值，只需从迭代器函数中为它们返回 undefined，它们将被忽略：

var values = $(".data-1 :input").map(function() {
    var val = $(this).val();
    return val ? val : undefined;
}).get();

【讨论】：