将html div添加到数组中

时间：2018-04-25 10:36:19

标签： javascript jquery html

我有以下HTML DIV保留用户的送货信息。我创建了一种方法，如果他们愿意，可以将他们的信息复制到结算部分，但也要确保他们实际上复制的是某些东西而不是空字段。我的支票代码确实有效但我想避免像我一样检查每个div。

有没有办法将所有这些div添加到数组并迭代并检查数组？

＆＃13;
＆＃13; 
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();
}
＆＃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" 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;
＆＃13;
＆＃13;

2 个答案:

答案 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)

几个问题。我试图修复其中的一些

＆＃13;
＆＃13; 
$(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;
＆＃13;
＆＃13;

相关问题
最新问题