Question

我有一个联系表格，需要姓名，联系方式（电子邮件或电话），电子邮件或电话文本字段（取决于点击的单选按钮）和说明。我正在使用jQuery的验证插件进行验证。当单击电子邮件单选按钮时，电子邮件字段会出现，电话字段也会出现相同的情况。我的问题是，当单击电子邮件单选按钮时，代码将如何查看验证电子邮件文本字段，并在单击电话单选按钮时验证电话文本字段。其中一个应该是必需的，但不是两个都需要。如果有帮助，当我点击电子邮件单选按钮时，会出现电子邮件文本字段，电话文本字段会消失，反之亦然。

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");
    }

  });
});

我尝试使用vars email和telephone做一些事情，但不确定是否需要它们。

Answer 1

As per documentation，您将使用depends option under rules。

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

以下演示尽可能接近我没有看到您的特定代码。这仅仅是关于如何在您的场景中正确使用depends的演示。还没有包含任何代码来显示/隐藏字段，因为可能在这方面你已经有了一些工作代码。

在通过required按钮做出选择之前，没有radio。然后，只有与其“已检查”radio按钮对应的字段required。（感谢required，radio规则与depends按钮一起切换。）

工作演示：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>

修改

使用您的显示/隐藏代码，这是一个粗略的“概念验证”演示：http://jsfiddle.net/7622M/

如何验证与单选按钮相关的字段？

1 个答案: