how to use if rule in jquery

Question

Hi I have a simple modal popup which has 3 name fields and 3 e mail fields adjacent to each other. I am new to jQuery so can any one please help me how to write a logic for the following case?

The first name field and Email field are mandatory so I kept the class as required fields but the other two name and e-mail fields are optional but if I enter a value in name field I have to enter the value in Email field. In other words if name field is not empty email field should not be empty. Please let me know if some one can help me thank you.

The jQuery code is as follows its getting data from 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"
        },

THE Html code is as fallows

<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

I think you could add an event handler for your optional name element that will dynamically add or remove required class for address.

I don't know if I'm picking the right ids here, but you should get the idea:

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

or even shorted version but may be less readable if you are new to jQuery

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