次のページボタンをクリックする前にdivが空であることを確認してください

Question

私のページには2つのボタンがあります。 1つは「アドレスの更新」と「次のページ」です。アドレス帳にリダイレクトされたアドレスを更新し、アドレス帳からアドレスを選択する必要があります。しかし、ユーザーが "次のページ"をクリックすると、 "アドレス"を更新する前に、エラーメッセージが表示されるはずです。

<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

あなたはこれを試すことがあります。それが適用される場合はただ1つの隠れフィールドを追加

$(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>

Answer 2

divタグを閉じるためのhtmlを修正しました。 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>