我有以下HTML DIV保留用户的送货信息。我创建了一种方法,如果他们愿意,可以将他们的信息复制到结算部分,但也要确保他们实际上复制的是某些东西而不是空字段。我的支票代码确实有效但我想避免像我一样检查每个div。
有没有办法将所有这些div添加到数组并迭代并检查数组?
document.querySelector('#sameAsBilling').addEventListener('click', checkEmpty);
function checkEmpty() {
var shippingName = document.getElementById('shipping_firstname').value;
if (shippingName === "") {
jQuery("#shipping_firstname").attr("placeholder", "ENTER DETAILS HERE");
document.getElementById("shipping_firstname").style["border-color"] = "red";
document.getElementById("shipping_firstname").scrollIntoView();
document.getElementById("sameAsBilling").checked = false;
return;
}
jQuery("#shipping_firstname").attr("placeholder", "");
showHideShipping();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="chkField">
<label for="shipping_firstname">[CustomerInfo_firstname]</label>
<input name="shipping_firstname" onchange="clearContent(this);" type="text" id="shipping_firstname" value="[shipping_firstname]" size="15" tabindex="16" class="txtBoxStyle" />
<!--START: req_shipping_firstname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_firstname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_lastname">[CustomerInfo_lastname]</label>
<input name="shipping_lastname" type="text" onchange="clearContent(this);" id="shipping_lastname" value="[shipping_lastname]" size="15" tabindex="17" class="txtBoxStyle" />
<!--START: req_shipping_lastname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_lastname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_company">[CustomerInfo_company]</label>
<input name="shipping_company" type="text" onchange="clearContent(this);" id="shipping_company" value="[shipping_company]" size="25" tabindex="18" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_address">[CustomerInfo_address]</label>
<input name="shipping_address" type="text" onchange="clearContent(this);[po_box_disabled_billing]" id="shipping_address" value="[shipping_address]" size="25" tabindex="20" class="txtBoxStyle" />
<!--START: req_shipping_address-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_address-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_address2">[CustomerInfo_address2]</label>
<input name="shipping_address2" type="text" onchange="clearContent(this);" id="shipping_address2" value="[shipping_address2]" size="25" tabindex="21" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_city">[CustomerInfo_city]</label>
<input name="shipping_city" type="text" onchange="clearContent(this);" id="shipping_city" value="[shipping_city]" size="25" tabindex="22" class="txtBoxStyle" />
<!--START: req_shipping_city-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_city-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_country">[CustomerInfo_country]</label>
<select name="shipping_country" onchange="this.form.shipping_zip.value='';populateState('shipping_state','shipping_country');check_stateValidator('billing');check_address('billing');" tabindex="23" class="txtBoxStyle" id="shipping_country">
</select>
<!--START: req_shipping_country-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_country-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_phone">[CustomerInfo_phone]</label>
<input name="shipping_phone" type="text" onchange="clearContent(this);" id="shipping_phone" value="[shipping_phone]" size="25" tabindex="19" class="txtBoxStyle" />
<!--START: req_shipping_phone-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_phone-->
<div class="clear"></div>
</div>
&#13;
答案 0 :(得分:0)
尝试这样的事情:
function checkEmpty() {
var ok = true;
$('.check-field').each(function(index, field) {
var $field = $(field);
if (!$field.val()) { // Invalid field
ok = false;
$field
.attr("placeholder", "ENTER DETAILS HERE")
.css("border-color", "red");
field.scrollIntoView();
}
else { // Valid field. Resets the style.
$field
.attr("placeholder", "")
.css("border-color", "");
}
});
$("#sameAsBilling").prop("checked", (ok ? "checked" : false));
showHideShipping();
}
我实际上没有对它进行过测试,所以请原谅我任何拼写错误或语法错误。问题是您需要为要检查的每个元素添加一个名为check-field
的类。片段将循环遍历所有片段并检查值,只要有错误就更改边框颜色和占位符。因此,所有无效元素将同时设置为无效,而不是一个一个。
答案 1 :(得分:0)
几个问题。我试图修复其中的一些
$(function() {
$('#sameAsBilling').on('click', checkEmpty);
/*
$("[name^=shipping]").on("input",function() {
if ($.trim(this.value)==="") {
this.value = "placeholders make more sense";
}
});
*/
});
function checkEmpty() {
var $shippingFN = $('#shipping_firstname');
var shippingName = $shippingFN.val();
if (shippingName === "") {
$shippingFN.attr("placeholder", "ENTER DETAILS HERE");
$shippingFN.css({"border-color":"red"});
$shippingFN[0].scrollIntoView();
$("#sameAsBilling").prop("checked",false);
return;
}
else $shippingFN.attr("placeholder", "");
//showHideShipping();
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="chkField">
<label for="shipping_firstname">[CustomerInfo_firstname]</label>
<input name="shipping_firstname" type="text" id="shipping_firstname" value="[shipping_firstname]" size="15" tabindex="16" class="txtBoxStyle" />
<!--START: req_shipping_firstname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_firstname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_lastname">[CustomerInfo_lastname]</label>
<input name="shipping_lastname" type="text" id="shipping_lastname" value="[shipping_lastname]" size="15" tabindex="17" class="txtBoxStyle" />
<!--START: req_shipping_lastname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_lastname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_company">[CustomerInfo_company]</label>
<input name="shipping_company" type="text" id="shipping_company" value="[shipping_company]" size="25" tabindex="18" class="txtBoxStyle" />
<div class="clear"></div>
</div>
Same <input type="checkbox" id="sameAsBilling" />
<div class="chkField">
<label for="shipping_address">[CustomerInfo_address]</label>
<input name="shipping_address" type="text" id="shipping_address" value="[shipping_address]" size="25" tabindex="20" class="txtBoxStyle" />
<!--START: req_shipping_address-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_address-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_address2">[CustomerInfo_address2]</label>
<input name="shipping_address2" type="text" id="shipping_address2" value="[shipping_address2]" size="25" tabindex="21" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_city">[CustomerInfo_city]</label>
<input name="shipping_city" type="text" id="shipping_city" value="[shipping_city]" size="25" tabindex="22" class="txtBoxStyle" />
<!--START: req_shipping_city-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_city-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_country">[CustomerInfo_country]</label>
<select name="shipping_country" onchange="this.form.shipping_zip.value='';populateState('shipping_state','shipping_country');check_stateValidator('billing');check_address('billing');" tabindex="23" class="txtBoxStyle" id="shipping_country">
</select>
<!--START: req_shipping_country-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_country-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="shipping_phone">[CustomerInfo_phone]</label>
<input name="shipping_phone" type="text" onchange="clearContent(this);" id="shipping_phone" value="[shipping_phone]" size="25" tabindex="19" class="txtBoxStyle" />
<!--START: req_shipping_phone-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_shipping_phone-->
<div class="clear"></div>
</div>
&#13;