1

我有一个联系表格，询问是否愿意通过电子邮件或电话联系。当您单击电子邮件单选按钮时，会出现一个电子邮件文本字段。单击电话单选按钮也是如此。例如，当我单击电子邮件单选按钮并输入无效电子邮件时，无效电子邮件错误消息会出现模糊。现在，当我单击电话时，会出现电话文本字段，但无效的电子邮件错误消息不会消失。这就是我希望发生的事情。

HTML（带引导程序）

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

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

JavaScript

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

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

  $('#contact_type_telephone').click(function() {
    $('#telephone').show();
    $('#email').hide();
    $('#contact_email').val('');
  });

  $('#new_contact').validate({
    rules: {
      'contact[name]': {
        required: true
      },
      'contact[email]': {
        required: {
          depends: function(element){
            return $("#contact_type_email").prop("checked");
          }
        },
        email: true
      },
      'contact[telephone]': {
        required: {
          depends: function(element) {
            return $("#contact_type_telephone").prop("checked");
          }
        },
        phoneUS: true
      }
    }
    errorPlacement: function(error, element) {
      error.appendTo("#error");
}
  }
}
4

1 回答 1

0

从OP的评论：

@Sparky，这是我的 jsFiddle：jsfiddle.net/mikeglaz/BmNWR。当我单击电子邮件单选按钮时，输入无效的电子邮件地址，然后单击电话单选按钮，我的无效电子邮件错误消息仍然存在。– 麦克格拉兹

这就是我在上一个问题的答案的最后一次编辑中试图向您展示的内容。

我清理了你的逻辑并添加了$('label').hide();......

$('#contact_type_email').click(function () {
    $('#email').show();
    $('#telephone').hide();
    $('#contact_telephone').val('');             // <-- fixed this
    $('label[for="contact_telephone"]').hide();  // <-- added this
});

$('#contact_type_telephone').click(function () {
    $('#telephone').show();
    $('#email').hide();
    $('#contact_email').val('');
    $('label[for="contact_email"]').hide();      // <-- added this
});

修改后的 jsFiddle 演示：http: //jsfiddle.net/BmNWR/8/

于 2013-02-17T22:48:30.830 回答