0

名前、連絡方法 (電子メールまたは電話)、電子メールまたは電話のテキスト フィールド (クリックされたラジオ ボタンに応じて)、および説明を必要とする連絡フォームがあります。jQuery の Validation プラグインで検証しています。電子メールのラジオ ボタンをクリックすると電子メール フィールドが表示され、電話フィールドも同様です。私の質問は、電子メールのラジオ ボタンがクリックされたときに電子メールのテキスト フィールドを検証し、電話のラジオ ボタンがクリックされたときに電話のテキスト フィールドを検証するコードはどのようになるかということです。どちらか一方が必須ですが、両方が必須ではありません。メールのラジオ ボタンをクリックすると、メールのテキスト フィールドが表示され、電話のテキスト フィールドが消えます。その逆も同様です。

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

  });
});

email私はvarsで何かをしようとしましたtelephoneが、それらが必要かどうかはわかりません.

4

1 に答える 1

0

ドキュメントによると、のdepends下のオプションをrules使用します。

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

次のデモは、特定のコードを見ずに私が喜んで取得できる限り近いものです。dependsこれは、シナリオで適切に使用する方法についてのデモンストレーションにすぎません。また、フィールドを表示/非表示にするためのコードも含まれていません。おそらく、その点ですでにいくつかの実用的なコードがあるからです。

ボタンrequiredで選択するまでは何もありません。次に、「チェック済み」ボタンradioに対応するフィールドのみが作成されます。（ルールはボタンと一緒に切り替えられます。）radiorequiredrequiredradiodepends

作業デモ： 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/

于 2013-01-25T19:43:58.670 に答える