javascript - 如何检查javascript或jQuery中的任何div和input标签是否为空？

Question

要求是在单击一次按钮时检查多个 div 和输入标签的空验证。

html代码

<div class=" droppable multipleAlertEmptyCheck"></div>
<input type="text" class="multipleAlertEmptyCheck">
<div class=" droppable multipleAlertEmptyCheck"></div>
<input type="text" class="multipleAlertEmptyCheck">

JS代码

$(document).on('click','#multipleAlertSubmit', function(){
    var actval = $(".multipleAlertEmptyCheck");
    var actcount = actval.length;
    for(var i = 0; i<=actcount-1; i++){     
     if(actval[i].value == '' || actval[i].textContent == ''){
         document.getElementById("message").innerHTML = "Fill all fields";
         return false;
    }else{   
         document.getElementById("message").innerHTML="";
    } 
    }    

标签： javascriptjqueryjquery-ui

Answer 1

function logEmptyElements ( $elements ) {
  //find the input elements that do not have a value
  var $emptyInputs = $elements.filter(':input').filter(function(){
      return !this.value.trim();
  });
  //find the non inputs that do not have inner html
  var $emptyDivs = $elements.not(':input').filter(function(){
      return !this.innerHTML.trim();
  });
  
  console.log(
    $emptyInputs.add($emptyDivs).get()
  );
}

logEmptyElements( $('.multipleAlertEmptyCheck1') );
logEmptyElements( $('.multipleAlertEmptyCheck2') );
logEmptyElements( $('.multipleAlertEmptyCheck3') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="droppable multipleAlertEmptyCheck1"></div>
<input type="text" class="multipleAlertEmptyCheck1">
<div class="droppable multipleAlertEmptyCheck1"></div>
<input type="text" class="multipleAlertEmptyCheck1">

<div class="droppable multipleAlertEmptyCheck2">A</div>
<input type="text" class="multipleAlertEmptyCheck2" value="1">
<div class="droppable multipleAlertEmptyCheck2"></div>
<input type="text" class="multipleAlertEmptyCheck2">

<div class="droppable multipleAlertEmptyCheck3">A</div>
<input type="text" class="multipleAlertEmptyCheck3" value="1">
<div class="droppable multipleAlertEmptyCheck3">B</div>
<input type="text" class="multipleAlertEmptyCheck3" value="2">