检查特定 div 中的所有输入字段是否已填充并回显文本 js答案

【问题标题】：Check if all input fields within specific div is filled and echo text js检查特定 div 中的所有输入字段是否已填充并回显文本 js
【发布时间】：2018-01-09 05:00:33
【问题描述】：

我有 2 个包含多个输入字段的 div，我正在尝试检查它们是否已填充，如果已填充，则在另一个 div 中打印特定文本。

无论出于何种原因，我尝试过的任何方法都无法使其正常工作，并且我一直在寻找答案。这是我目前拥有的代码--

// if for sale
var fsdiv = $("div#lp-fs-costs");

fsdiv2 = fsdiv.find("input[type=text]");

//if (fsdiv2.trim().length) 

var value = $.trim($("fdiv2").val());

if(value.length>0) {

$('#ls-anc-info').append('<br /> You added cost details.' );
} else {
$('#ls-anc-info').append('<br /> You have not added any cost details.' );
}


// if for rent
var frdiv = $("div#lp-fr-costs");

if($(frdiv.find("input[type=text]")).length > 0) {

$('#ls-anc-info').append('<br /> You added cost details.' );
} else {
$('#ls-anc-info').append('<br /> You have not added any cost details.' );
}

我之前尝试过的代码 --

// If for sale
//var fsdiv = $("#lp-fs-costs");
//var inputs = fsdiv.find("input");

var inputs2 = document.getElementById('lp-fs-costs').getElementsByTagName('input');

if($(inputs2).val().length > 0) {

$('#ls-anc-info').append('<br /> You added cost details.' );
} else {
$('#ls-anc-info').append('<br /> You have not added any cost details.' );
}


// If for rent
//if ( ($("label[for=for-rent]").hasClass("active")) && ($("#for-rent:checked")) ) {
//var frdiv = $("#lp-fr-costs");

if($("#lp-fr-costs :input").val().length > 0) {

$('#ls-anc-info').append('<br /> You added cost details.' );
} else {
$('#ls-anc-info').append('<br / >You have not added any cost details.' );
}

//}

更新

我的 html 代码相当广泛，它是一个多步骤的表单。与我的问题相关的部分是--

<div class="aic-section">

<!-- FIELDS FOR RENT ALL IN COSTS -->
<div id="lp-fr-costs" class="lp-fr-divs" style="display: block;">

<!-- FR CABLE -->
<div class="subins2">
<div class="sublabel-aic">CABLE/WIFI</div>
<div class="aic-lp">
<input name="tco_tvnet" value="" type="text" class="form-control money" placeholder="$">
</div>
</div>

<!-- FR UTILITIES -->
<div class="subins2">
<div class="sublabel-aic">UTILITIES</div>
<div class="aic-lp">
<input name="tco_elec" value="" type="text" class="form-control money" placeholder="$">
</div>
</div>

<!-- MORE INPUT FIELDS ETC. -->

</div>
<!-- END FIELDS FOR RENT ALL IN COSTS -->

<!-- FIELDS FOR SALE ALL IN COSTS -->
<div id="lp-fs-costs" class="lp-fs-divs" style="display: none;">

<!-- FS HOA -->
<div class="subins2">
<div class="sublabel-aic">Common Charges/HOA</div>
<div class="aic-lp">
<input name="tco_hoa" value="" type="text" class="form-control money" placeholder="$" disabled="">
</div>
</div>

<!-- FS TAXES -->                                           
<div class="subins2">
<div class="sublabel-aic">Taxes (Monthly)</div>
<div class="aic-lp">
<input name="tco_tax" value="" type="text" class="form-control money" placeholder="$" disabled="">
</div>
</div>

<!-- MORE INPUT FIELDS ETC. -->

</div>

</div>

【问题讨论】：

请分享你的html。
你能分享你的整个代码，包括html结构吗？
@BhuwanBhatt 我更新了它
@Swamy 我更新了它
你想如何检查它...点击按钮或页面加载？？

标签： javascript jquery html forms input

【解决方案1】：

如果你使用 jQuery，你可以使用这个简单的技巧

$('button').click(function(){
  var c = $("div#lp-fs-costs input[type='text']").filter(function() { return this.value == ""; }).length;
  if (c > 0) {
      console.log('there is ' + c + ' empty input');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lp-fs-costs">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</div>
<button>check</button>

【讨论】：

【解决方案2】：

我会建议你为rent 和sale 创建两个函数，比如 checksale() 和 checkrent() 然后在按钮单击或加载时触发它们。我在按钮单击时为您制作了一个 sn-p。

如果您想在加载时触发它们，只需像这样调用 document.ready 中的函数

$(document).ready(function() {
  checksale();
  checkrent();
});

function checksale() {
  var inputLength = $("div#lp-fs-costs input[type=text]").length;
  var emptyLength = $("div#lp-fs-costs input[type=text]").filter(function() {
    return this.value == ""
  }).length;
  if (emptyLength > 0) {
    $('#ls-anc-info').html('<p style="color:red;">You have not added some/any cost details.</p>');
  } else {
    $('#ls-anc-info').html('<p style="color:green;">You have added all cost details.</p>');
  }
}

function checkrent() {
  var inputLength = $("div#lp-fr-costs input[type=text]").length;
  var emptyLength = $("div#lp-fr-costs input[type=text]").filter(function() {
    return this.value == ""
  }).length;
  if (emptyLength > 0) {
    $('#lr-anc-info').html('<p style="color:red;">You have not added some/any cost details.</p>');
  } else {
    $('#lr-anc-info').html('<p style="color:green;">You have added all cost details.</p>');
  }
}

$('#checksale').on('click', function() {
  checksale();
})

$('#checkrent').on('click', function() {
  checkrent();
})

body {
  font: 13px Verdana;
}

.sublabel-aic,
.aic-lp {
  display: inline-block;
}

#lp-fr-costs,
#lp-fs-costs {
  margin: 0 0 20px 0;
  background: #ccc;
  padding: 10px;
}

#checkrent,
#checksale {
  margin: 10px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aic-section">
  <!-- FIELDS FOR RENT ALL IN COSTS -->
  <div id="lp-fr-costs" class="lp-fr-divs" style="display: block;">
    <!-- FR CABLE -->
    <div class="subins2">
      <div class="sublabel-aic">CABLE/WIFI</div>
      <div class="aic-lp">
        <input name="tco_tvnet" value="" type="text" class="form-control money" placeholder="$">
      </div>
    </div>
    <!-- FR UTILITIES -->
    <div class="subins2">
      <div class="sublabel-aic">UTILITIES</div>
      <div class="aic-lp">
        <input name="tco_elec" value="" type="text" class="form-control money" placeholder="$">
      </div>
    </div>
    <!-- MORE INPUT FIELDS ETC. -->
    <button id="checkrent">Check Rent</button>
  </div>
  <!-- END FIELDS FOR RENT ALL IN COSTS -->
  <div id="lr-anc-info"></div>
  <!-- FIELDS FOR SALE ALL IN COSTS -->
  <div id="lp-fs-costs" class="lp-fs-divs" style="display: ;">
    <!-- FS HOA -->
    <div class="subins2">
      <div class="sublabel-aic">Common Charges/HOA</div>
      <div class="aic-lp">
        <input name="tco_hoa" value="" type="text" class="form-control money" placeholder="$">
      </div>
    </div>
    <!-- FS TAXES -->
    <div class="subins2">
      <div class="sublabel-aic">Taxes (Monthly)</div>
      <div class="aic-lp">
        <input name="tco_tax" value="" type="text" class="form-control money" placeholder="$">
      </div>
    </div>
    <!-- MORE INPUT FIELDS ETC. -->
    <button id="checksale">Check Sale</button>
  </div>
  <div id="ls-anc-info"></div>
</div>

【讨论】：

【解决方案3】：

您可以使用filter 遍历div 中的所有input 字段以检查它们是否为空。

var $empties = $("div#lp-fs-costs input[type='text']").filter(function() {
   return !this.value.trim()
});
if ($empties.length) {
   $('#ls-anc-info').empty();
   $('#ls-anc-info').append('<br /> You have not added cost details.' );
} else {
  $('#ls-anc-info').empty();
  $('#ls-anc-info').append('<br /> You added cost details.' );
}

【讨论】：