Jquery 如何验证绑定到单选按钮的字段？

我有一个联系人表单，需要姓名、联系方式（电子邮件或电话）、电子邮件或电话文本字段（取决于单击的单选按钮）和说明。我正在使用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>

我试着用VAR

电子邮件和
电话做些事情，但不确定是否需要它们。
，你应该使用

下面的演示非常接近，我不想看到您的特定代码。这只是一个演示，说明如何正确地将
与您的场景结合使用。还没有包含使字段显示/隐藏的代码，因为您可能已经有了一些这方面的工作代码

在通过
单选按钮进行选择之前，不需要任何
。然后，只有与它的“选中”单选按钮相对应的字段被设置为“必需”
required
。（由于
依赖
，因此
必需
规则与
单选按钮一起切换）

工作演示：

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

});

<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>

HTML：

$(document).ready(function () {

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

});

<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>


电话：


电邮：


电话：


电邮：




编辑：

这是一个粗糙的“概念验证”演示，使用了您的显示/隐藏代码：
我试着帮助您。就像我在那里的评论一样，请展示你的HTML和jQuery。很抱歉，我的脑袋进水了。我相信我已经解决了你下面的问题。您只需要将其与显示/隐藏代码集成。你只需要调整它，使它漂亮。谢谢@sparky，我真的非常感谢你的帮助。还有一个问题。除单选按钮外，验证是实时的。如果我在选中电子邮件广播的情况下单击“提交”，我会收到错误消息“请提供有效的电子邮件地址”。但是如果我单击电话广播，消息不会切换到“请提供有效的电话号码”。除非我按提交按钮。