wie zu verwenden, wenn Regel in jquery

Question

Hallo Ich habe ein einfaches modales Popup, das 3 Namensfelder und 3 E-Mail-Felder nebeneinander hat. Ich bin neu in jQuery, also kann mir bitte jemand helfen, eine Logik für den folgenden Fall zu schreiben?

Das Feld Vorname und E-Mail sind obligatorisch, daher habe ich die Klasse als Pflichtfelder behalten, aber die anderen beiden Namen- und E-Mail-Felder sind optional, aber wenn ich einen Wert im Feld Name eingebe, muss ich den Wert in Email eingeben Feld. Mit anderen Worten, wenn das Namensfeld nicht leer ist, sollte das E-Mail-Feld nicht leer sein. Bitte lassen Sie mich wissen, wenn jemand mir helfen kann, Ihnen zu danken.

Der Code jQuery ist wie folgt seinem bekommenen Daten von Ajax

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" 
        }, 

den HTML-Code ist als Brachen

<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

Ich glaube, Sie könnten einen Event-Handler für Ihren optionalen Namen Element hinzufügen Dadurch wird die erforderliche Klasse für die Adresse dynamisch hinzugefügt oder entfernt.

Ich weiß nicht, ob ich die richtigen IDs hier bin Kommissionierung, aber man sollte auf die Idee kommen:

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

oder sogar kurzgeschlossene Version aber weniger lesbar sein kann, wenn Sie jQuery neu sind

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