检查是否所有inpute具有相同的类和textarea,如果它们都是空的

时间:2016-06-29 15:09:46

标签: jquery html

你好问题是如果textarea不是空的..它表明所有字段都不是空的,即使输入确实是空的。

HTML

<div  class="h12">
<input class="h12lol" type="text" name="title" placeholder="nom"></input></div><br>
<div class="h12">
<input  class="h12lol" type="text" name="lieu" placeholder="date et lieu de naissance"></input></div><br>
<div class="h12">
<input  class="h12lol" type="text" name="adress" placeholder="adresse"></input></div><br>
<div class="h12">
<input   class="h12lol" type="text" name="email" placeholder="Email"></input></div><br>
<div class="h12">
<input  class="h12lol" type="text" name="int" placeholder="Telephone"></input></div><br>
<div class="h12">
<input  class="h12lol" type="text" name="page" placeholder="Les pages"></input></div><br>
    <div class="h12">

    <input type="hidden" name="MAX_FILE_SIZE" value="2048000" />

<input  class="h12lol"  style="visibility: hidden;" name="myimage" type='file' multiple accept='image/*' id='logopics' /><br/><br/></div>
<textarea  class="h12lol" id='editor1' name="article" style="margin-top: 30px;"></textarea>  <input  id="step02" class="svx" type="button" name="step" value="step 02">

这是我的脚本,用于验证输入和textarea是否为空。我做了一个小提琴https://jsfiddle.net/2emnrkyg/

Jquery的

   <script> 
       $("#step02").click(function() {

  var hasNoValue;
  var hasNoValue2;
  $("input.h12lol").each(function() {

      if (!$(this).val()) {


          hasNoValue = true;

      } else {
          hasNoValue = false;
      }

  });

  if ($.trim($("textarea.h12lol").val()).length < 1) {

      hasNoValue2 = true;

  } else {
      hasNoValue2 = false;
  }
  if ((hasNoValue) && (hasNoValue2)) {
      alert('all empty')

  } else {
      alert('all no empty')
  }

});         

3 个答案:

答案 0 :(得分:1)

问题是如果最后一个不为空,则hasNoValue将设置为false,即使其中一个输入为空。

你需要打破if。快速修复将是:

$("input.h12lol").each(function() {
      if(hasNoValue != true){
          if (!$(this).val()) {
              hasNoValue = true;
          } else {
              hasNoValue = false;
          }
      }
  });

答案 1 :(得分:1)

试试此代码

一旦它处于foreach状态,你需要打破这个条件

Check out the fiddle

  $(document).ready(function(){
        $('#step02').click(function(){
        var inputvalue = 0;
        $("input.h12lol").each(function() {
        if(inputvalue == 0){
        if($(this).val() == ''){        
           inputvalue = 0;
        } else {
       // alert('not empty');
           inputvalue = 1;
        }
        }

        });

        if($("#editor1").val()== ""){
         var textarada = 0;
        } else {
        var textarada = 1;
        }

        if(textarada == 1 || inputvalue == 1){
            alert('all not empty');
        } else {
        alert('all  empty');
        }

        });
    });

答案 2 :(得分:0)

而不是使用jQuery.each循环,您可以过滤所有输入元素,以便只获取非空的。

&#13;
&#13;
$(function () {
  $("#step02").click(function () {
    var hasNoValue = false;
    var inputsNotEmpty = $("input.h12lol").filter(function (index, element) {
      return this.value.trim() != ''
    });
    if ($("textarea.h12lol").val().trim() == '') {
      hasNoValue = true;
    }
    if ((inputsNotEmpty.length == 0) && (!hasNoValue)) {
      alert('all empty')
    } else {
      alert('all no empty')
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="h12">
    <input class="h12lol" type="text" name="title" placeholder="nom">
</div>
<br>
<div class="h12">
    <input class="h12lol" type="text" name="lieu" placeholder="date et lieu de naissance">
</div>
<br>

<div class="h12">
    <input class="h12lol" type="text" name="adress" placeholder="adresse">
</div>
<br>
<div class="h12">
    <input class="h12lol" type="text" name="email" placeholder="Email">
</div>
<br>
<div class="h12">
    <input class="h12lol" type="text" name="int" placeholder="Telephone">
</div>
<br>
<div class="h12">
    <input class="h12lol" type="text" name="page" placeholder="Les pages">
</div>
<br>
<div class="h12">
    <input type="hidden" name="MAX_FILE_SIZE" value="2048000">
    <input class="h12lol" style="visibility: hidden;" name="myimage" type='file' multiple accept='image/*'
           id='logopics'/><br/><br/>
</div>
<textarea class="h12lol" id='editor1' name="article" style="margin-top: 30px;"></textarea>
<input id="step02" class="svx" type="button" name="step" value="step 02">
&#13;
&#13;
&#13;