comment utiliser si règle dans jquery

Question

Salut J'ai un simple popup modal qui a 3 champs de nom et 3 champs de courrier électronique adjacents les uns aux autres. Je suis nouveau à jQuery alors quelqu'un peut-il m'aider s'il vous plaît comment écrire une logique pour le cas suivant? Le champ du prénom et le champ E-mail sont obligatoires, j'ai donc gardé la classe comme champs obligatoires mais les deux autres champs nom et e-mail sont facultatifs mais si je saisis une valeur dans le champ nom, je dois entrer la valeur dans E-mail champ. En d'autres termes, si le champ de nom n'est pas vide, le champ de courrier électronique ne doit pas être vide. S'il vous plaît laissez-moi savoir si quelqu'un peut m'aider merci.

Le code jQuery est le suivant son obtention de données de 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" 
        }, 

le code HTML est placé comme suit

<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

Je pense que vous pouvez ajouter un gestionnaire d'événements pour votre élément optionnel nom Cela ajoutera dynamiquement ou supprimera la classe requise pour l'adresse.

Je ne sais pas si je choisir les bons ids ici, mais vous devriez avoir l'idée:

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

ou même version abrégée, mais peut-être moins lisible si vous êtes nouveau à jQuery

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