How to validate fields tied to radio buttons?

问题

I have a contact form which requires a name, method of contact (email or telephone), an email or telephone text-field(depending on which radio button is clicked) and a description. I'm validating with jQuery's Validation plug in. The email field appears when one clicks on the email radio button and the same for the telephone field. My question is how would the code look to validate the email text-field when the email radio button is clicked and validate the telephone text-field when the telephone radio button is clicked. One of them should be required but not both. If it helps, when I click on the email radio button the email text-field appears and the telephone text-field disappears and vice-versa.

HTML

  <div class="control-group">
    <label class="control-label" for="contact_name">Name</label>
    <div class="controls">
      <input id="contact_name" name="contact[name]" size="30" type="text" />
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="How_would_you_like_to_be_contacted_">How would you like to be contacted?</label>
    <div class="controls">
      <label class="radio">
        <input id="contact_type_email" name="contact_type" type="radio" value="email" />
        <label for="Email">Email</label>
      </label>

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      <label class="radio">
        <input id="contact_type_telephone" name="contact_type" type="radio" value="telephone" />
        <label for="Telephone">Telephone</label>
      </label>
    </div>
  </div>

  <div class="control-group" id="email">
    <label class="control-label" for="contact_email">Email</label>
    <div class="controls">
      <input id="contact_email" name="contact[email]" size="30" type="text" />
    </div>
  </div>

  <div class="control-group" id="telephone">
    <label class="control-label" for="contact_telephone">Telephone</label>
    <div class="controls">
      <input id="contact_telephone" name="contact[telephone]" placeholder="###-###-####" size="30" type="text" />
    </div>
  </div>

jQuery

$(document).ready(function() {
  $('#email').hide();
  $('#telephone').hide();

  var email = false;
  var telephone = false;

  $('#contact_type_email').click(function() {
    $('#email').show();
    $('#telephone').hide();

    email = true;
    telephone = false;
  });
  $('#contact_type_telephone').click(function() {
    $('#telephone').show();
    $('#email').hide();

    telephone = true;
    email = false;
  });

  jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, "");
    return this.optional(element) ||
        phone_number.match(/^[2-9]\d{2}-[2-9]\d{2}-\d{4}$/);
  }, "Please specify a valid phone number");

  $('#new_contact').validate({
    ignore: ":hidden",
    rules: {
      'contact[name]': {
        required: true
      },
      'contact[email]': {
        required: true,
        email: true
      },
      'contact[telephone]': {
        required: true,
        phoneUS: true
      },
      'contact[description]': {
        required: true
      },
      contact_type: {
        required: true
      }
    },

    messages: {
      'contact[name]': {
        required: "Please provide a name."
      },
      'contact[telephone]': {
        required: "Please provide a valid telephone number."
      },
      'contact[description]': {
        required: "Please provide a description of the work you would like done."
      }
    },

    errorPlacement: function(error, element) {
      error.appendTo("#error");
    }

  });
});

I tried doing something with the vars email and telephone but not sure if they're needed.

回答1:

As per documentation, you'd use the depends option under rules.

rules: {
    telephone_field: {
        required: {
            depends:  function(element) {
                return $("#telephone_checkbox").prop("checked");
            }
        }
    }
}

The following demo is as close as I'm willing to get without seeing your specific code. It's merely a demonstration about how to properly use depends with your scenario. There is also no code included to make fields show/hide because, presumably, you already have some working code in that regard.

Nothing is required until a choice is made via the radio buttons. Then only the field corresponding to it's "checked" radio button is made required. (The required rule is toggled along with the radio buttons thanks to depends.)

Working Demo: http://jsfiddle.net/ZqHMq/

jQuery:

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            telephonefield: {
                required: {
                    depends: function (element) {
                        return $("#telephone").prop("checked");
                    }
                }
            },
            emailfield: {
                required: {
                    depends: function (element) {
                        return $("#email").prop("checked");
                    }
                }
            }
        }
    });

});

HTML:

<form id="myform">
    telephone: <input type="text" name="telephonefield" />
    <br/>
    email: <input type="text" name="emailfield" />
    <br/>
    telephone: <input type="radio" name="contactradio" id="telephone" />
    <br/>
    email: <input type="radio" name="contactradio" id="email" />
    <br />
    <input type="submit" />
</form>

---

EDIT:

This is a crude "proof-of-concept" demonstration using your show/hide code: http://jsfiddle.net/7622M/

来源：https://stackoverflow.com/questions/14528505/how-to-validate-fields-tied-to-radio-buttons