Question

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

HTML（使用Bootstrap）

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

Answer 1

来自OP的评论：

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

我试图在the last edit of my answer上向您展示上一个问题。

我稍微清理了你的逻辑并添加了$('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/

jQuery验证点击单选按钮

1 个答案: