jqueryのルールを使用する方法

Question

こんにちは私は3つの名前フィールドと3つの電子メールフィールドが互いに隣接している単純なモーダルポップアップを持っています。私はjQueryを初めて使用しているので、次のケースのロジックを書く方法を手伝ってください。

ファーストネームフィールドと電子メールフィールドは必須ですので、必須フィールドとしてクラスを保持しますが、他の2つの名前と電子メールフィールドはオプションですが、名前フィールドに値を入力すると、電子メールに値を入力する必要がありますフィールド。つまり、名前フィールドが空でない場合、電子メールフィールドは空であってはいけません。あなたに感謝してくれる人がいれば教えてください。アヤックス

function shareWithAFriend(itemId) { 
     $.ajax({ 
      url: "shareWithAFriend.do?itemId="+itemId, 
      type: "GET", 
      success: function(html) { 
       $("#tellInfoPop").html(html); 
       $("#itemId").val(itemId); 
       $("#emailFriend").validate({ 
        errorClass: "formError", 
        errorContainer: "#referAFriendFormError", 
        errorLabelContainer: "#referAFriendFormError", 
        onfocusout: false, 
        wrapper: 'li', 
        messages: { 
         referName01: { 
          required: "<@spring.message "referAFriend.error.nameRequired"/>" 
         }, 
         referEmail01: { 
          required: "<@spring.message "referAFriend.error.emailRequired"/>", 
          email: "<@spring.message "referAFriend.error.emailFormat"/>" 
         }, 
         referEmail02: { 
          email: "<@spring.message "referAFriend.error.emailFormat"/>" 
         }, 
         referEmail03: { 
          email: "<@spring.message "referAFriend.error.emailFormat"/>" 
         }, 
         securityKey: { 
          required: "<@spring.message "referAFriend.error.securityRequired"/>" 
         } 
        }, 
        groups: { 
         emailGroup: "referEmail01 referEmail02 referEmail03" 
        }, 

からその取得したデータを次のように

jQueryのコードは

<div class="leftCol"> 
     <label for="emailToName1" class="formLabel"><span class="required">*</span>Name:</label> 
     <div><input type="text" id="emailToName1" name="referName01" value="${referAFriendBean.referName01!}" class="required" tabindex="1" /></div> 
     <div class="pad5Top"><input type="text" id="emailToName2" name="referName02" value="${referAFriendBean.referName02!}" tabindex="3" /></div> 
     <div class="pad5Top"><input type="text" id="emailToName3" name="referName03" value="${referAFriendBean.referName03!}" tabindex="5" /></div> 
    </div> 

    <div class="rightCol"> 
     <label for="emailToAddress1" class="formLabel"><span class="required">*</span>Email address:</label> 
     <div><input type="text" id="emailToAddress1" name="referEmail01" value="${referAFriendBean.referEmail01!}" class="required email" tabindex="2" /></div> 
     <div class="pad5Top"><input type="text" id="emailToAddress2" name="referEmail02" class="email" tabindex="4" value="${referAFriendBean.referEmail02!}" /></div> 
     <div class="pad5Top"><input type="text" id="emailToAddress3" name="referEmail03" class="email" tabindex="6" value="${referAFriendBean.referEmail03!}" /></div> 
    </div> 
    </div> 

Answer 1

を休閑などのHTMLコードがある私は、あなたのオプションのname要素のイベントハンドラを追加することができると思うですアドレスに必要なクラスを動的に追加または削除します。

私はここに右のidを選んだ場合、私は知らないが、あなたのアイデアを取得する必要があります

$('#emailToName2').keyup(function() { 
    if ($(this).val()) { 
     $('#emailToAddress2').addClass('required'); 
    } else { 
     $('#emailToAddress2').removeClass('required'); 
    } 
}); 

あるいは短絡版をしかし、あなたはjQueryの

に新しいしている場合は読みにくくなることがあり

$('#emailToName2').keyup(function() { 
    $('#emailToAddress2').toggleClass('required', $(this).val()); 
});