Question

我的页面中有两个按钮。一个是＆＃34;更新地址＆＃34;和＆＃34;下一页＆＃34;。更新地址重定向到地址簿，用户需要从中选择一个地址。但是，如果用户在更新＆＃34;地址＆＃34;之前单击＆＃34;下一页＆＃34;，则应显示错误消息。

<form>
    <div class="update-address"> <button>Update Address</button></div>
    <div class="to-address">
        <div>
            <div class="next-page"> <button>Next Page</button></div>
            <div class="error-msg"></div>
</form>

JS

$('.next-page').click(function () {
    if (!$.trim($('.to-address').html()).length) {
        $('.error-msg').html("Kindly update shipping address");
    }

帮我解决这个问题。

Answer 1

修复html以关闭div标签。使用is检查空div。要显示错误消息，请使用text而不是html。

$('.next-page').click(function () {
    if (!$('.to-address').is(':empty')) {
        $('.error-msg').text("Kindly update shipping address");
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="update-address">
  <button>Update Address</button>
</div>
<div class="to-address">
</div>
<div class="next-page">
  <button>Next Page</button>
</div>
<div class="error-msg"></div>

Answer 2

您可以尝试这样做：只添加一个隐藏字段（如果适用）

$(document).ready(function(){
  
  $('.next-page').click(function () {
    if($('.update-status').val() != 1){
        $('.error-msg').html("Kindly update shipping address");
        return false;
    }
  });
  
  $('.update-address button').click(function(){
    $('.update-status').val(1);
    return false
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
    <div class="update-address"> <button>Update Address</button></div>
    <div class="to-address">
        <div>
            <div class="next-page"> <button>Next Page</button></div>
            <div class="error-msg"></div>
        </div>
    </div>
    
    <input type="hidden" value="0" class="update-status">
</form>

在单击下一页按钮之前检查div是否为空

2 个答案: