检查表单中的任何输入是否为空

时间:2015-09-08 06:01:32

标签: javascript jquery

我要做的是检查具有required属性的任何输入是否为空。 如果他们这样做然后警告“空”但它只检测第一个输入。任何想法,帮助?

$(document).ready(function(){
    $("button").click(function(){
        if(!$("form input[required]").val()){
            alert("empty");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
    <div>
        <input type="text" required/>
    </div>
    <div>
        <input type="text" required/>
    </div>
    <div>
        <input type="text" required/>
    </div>
</form>
<button>test</button>

7 个答案:

答案 0 :(得分:3)

$("form input[required]").val()将仅返回带有required属性的第一个输入值。

您需要迭代每个必需的输入元素并检查它是否有值 - 可能通过修剪(如下所示)来排除空白值。

&#13;
&#13;
$(document).ready(function() {
  $("button").click(function() {
    var $empty = $("form input[required]").filter(function() {
        return !this.value.trim();
      }),
      valid = $empty.length == 0,
      items = $empty.map(function() {
        return this.placeholder
      }).get();

    if (!valid) {
      alert("below itema are empty: \n" + items.join('\n'));
    }

  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
  <div>
    <input type="text" placeholder="Item A" required/>
  </div>
  <div>
    <input type="text" placeholder="Item B" required/>
  </div>
  <div>
    <input type="text" placeholder="Item C" required/>
  </div>
</form>
<button>test</button>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

像这样使用:

if($("form input[required]")).filter(function(){
   return $(this).val().length === 0;
  }).each(function(){
      alert("empty");
  });

答案 2 :(得分:1)

在这种情况下,你必须循环遍历所有元素。

$(document).ready(function(){
  $("button").click(function(){
     var isEmpty = false;
     $("form input[required]").each(function(){
        if(!$(this).val()){
           isEmpty = true;
        }
     });
     if(isEmpty) alert('Empty');
  });
});

答案 3 :(得分:1)

您需要遍历所有找到的元素,以检查其中是否至少有一个元素未填写。在此处使用Array.prototype.some方法很方便:

&#13;
&#13;
$(document).ready(function(){
  $("button").click(function(){
    
    var hasEmpty = $("form input[required]").toArray().some(function(el) {
      return !el.value.trim();
    });
    
    if (hasEmpty) {
      alert("empty");
    }
    
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
  <div>
    <input type="text" required/>
  </div>
  <div>
    <input type="text" required/>
  </div>
  <div>
    <input type="text" required/>
  </div>
</form>
<button>test</button>
&#13;
&#13;
&#13;

答案 4 :(得分:1)

您只需要在awk '{print > ( FILENAME "." int( ( NR + 2768) / 2769) )}' YourFile 方法中使用它,以便您可以选择每个必需的元素。就像这个Jsfiddle

一样

.each
$(document).ready(function(){
  $("button").click(function(){
	$("form input[required]").each(function(){
        if(!$(this).val()){
           alert($(this).attr('name')+" is empty");
        }
     });
  });
})

<强>更新

如果您想获取占位符文字Check this ,请阅读评论。您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method=""> <div> <input name="input1" type="text" required/> </div> <div> <input name="input2" type="text" required/> </div> <div> <input name="input3" type="text" required/> </div> </form> <button>test</button>

答案 5 :(得分:1)

请尝试此表格提交。

 $("form").submit(function(){

  $("form input[required]").each(function(){
    if(!$(this).val()){
       alert($(this).attr('name')+" is empty")

 }); 

你的HTML看起来像这样。

<form action="" method="">
 <div>
 <input type="text" required/>
 </div>
  <div>
  <input type="text" required/>
  </div>
  <div>
  <input type="text" required/>
  <input type="submit" value="test"/>
  </div>
  </form>

答案 6 :(得分:0)

您需要使用每个功能来获得所需的输入值

$(document).ready(function(){
    $("button").click(function(){

        $("form input[required]").each(function(e,ui){
            if(!$(ui).val()){
               alert(e,' - empty');
            }
        });

    });
});