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 に答える