0

私がやりたいのは、フォームを送信するために1つのテキストボックスの値を入力することです。「米国の電話番号」と「国際電話番号」の2つのテキストボックスがあります。チェックボックスを使用して、これら2つのオプションを前後に切り替えています。デフォルトはUs電話番号フィールドです。

例えば:

ユーザーが「米国の電話番号」を持っていない場合、ユーザーは「国際」チェックボックスをクリックすると、「国際電話番号フィールド」に切り替わります。ユーザーが「国際電話番号」を入力すると、フォームによってフィールドが見事に検証されます。ただし、ユーザーはフォームを送信する準備ができていますが、非表示になっている他のフィールド(米国の電話番号フィールド)がフィールドを検証しているためにユーザーが送信できないため、フォームは送信されません。(写真を参照)。私はそれが起こらないようにしたい。

私の質問は、ユーザーがまたはフィールドのいずれかに値を入力したときに、フォームが送信されることを確認するにはどうすればよいですか。

画像

-------------- HTML -------------------

<form>
  <fieldset class="round shadow">
    <h3> Contact Information</h3>
    <p> Integer sagittis dolor a tellus bibendum tristique facilisis ipsum feugiat. Sed
      lacinia arcu scelerisque leo laoreet </p>
    <p class="field inline"> <span id="txtPhone-container" style="display: none;"> <span id="MainContent_lblPhone">Preferred Phone Number</span><span class="required">*</span><br>
      <input type="text" id="MainContent_txtPhone" name="ctl00$MainContent$txtPhone" class="error">
      <label for="username" generated="true" class="error" style="display: block;">Must acquire their preferred phone number.</label>
      </span> <span id="txtInternationalPhone-container" style="display: inline;"> <span id="MainContent_lblInternationalPhone">International Preferred Phone Number</span><span class="required">*</span><br>
      <input type="text" id="MainContent_txtInternationalPhone" name="ctl00$MainContent$txtInternationalPhone" class="valid">
      </span> <br>
      <input type="checkbox" name="ctl00$MainContent$CheckBox2" id="MainContent_CheckBox2">
      <label for="MainContent_CheckBox2">International</label>
    </p>
    <p class="field inline"> <span id="MainContent_lblEmail">Preferred E-mail Address</span><span class="required">*</span><br>
      <input type="text" id="MainContent_txtEmail" name="ctl00$MainContent$txtEmail" class="valid">
      <label for="MainContent_txtEmail" generated="true" class="error" style="display: none;">Must acquire thier preferred e-mail address.</label>
    </p>
  </fieldset>
  <p>
    <input type="submit" class="btnSave left" id="MainContent_btnSubmit" value="" name="ctl00$MainContent$btnSubmit" oldtitle="Submit" title="" aria-describedby="ui-tooltip-0">
    <input type="submit" class="btnClear left" id="MainContent_btnClear" value="" name="ctl00$MainContent$btnClear" oldtitle="Clear" title="">
  </p>
</form>

------------- jQUERY -----------------

$(function () {
$('#MainContent_CheckBox2').change(function () {
    $('#txtPhone-container').toggle(!this.checked);
    $('#txtInternationalPhone-container').toggle(this.checked);
}).change();

//Validator for US Phone Number Format (###-###-####)
$.validator.addMethod("PhoneNumberFormat", function (value, element) {
    return value.match(/^[2-9]\d{2}-\d{3}-\d{4}$/);
});

//Validator for International Phone Number Format (+17034567890 | +17034567890x1234 | +912024553455 | +912024553455x12 | +441237761457)
$.validator.addMethod('InternationalPhoneNumberFormat', function (value) {
    return value.match(/^(\+[0-9]{2,}[0-9]{4,}[0-9]*)(x?[0-9]{1,})?$/);
});

//validate form
jQuery.validator.setDefaults({
    debug: true,
});
$("#frmNewApplicants").validate({
    meta: "validate",
    submitHandler: function () {
        $("#frmNewApplicants").ajaxSubmit()
    },
    rules: {
        ctl00$MainContent$txtPhone: {
            required: true,
            PhoneNumberFormat: true
        },
        ctl00$MainContent$txtInternationalPhone: {
            required: true,
            InternationalPhoneNumberFormat: true
        },
    },
    messages: {
        ctl00$MainContent$txtPhone: {
            required: "Must acquire their preferred phone number.",
            PhoneNumberFormat: "Correct Format: ###-###-####"
        },
        ctl00$MainContent$txtInternationalPhone: {
            required: "ex:+17034567890",
            InternationalPhoneNumberFormat: "ex:+17034567890 or +17034567890x1234"
        }
    }
});

});

4

3 に答える 3

1

これは、依存関係のコールバックを使用して解決できます。

擬似コード:

InternationalNumberField is required IF (InternationalCheckBox is clicked)

UsNumberField is required IF (InternationalCheckBox is not clicked)
于 2012-07-27T16:04:19.913 に答える
0

これがあなたがすることです

  1. 最初のフィールドに有効な電話番号が含まれているかどうかを示す値を格納する変数を作成する
    • この変数を宣言し、false として初期化するだけです (後で詳しく説明します)。
    • 例えば: var firstValid = false;
  2. クリック イベント ハンドラーを送信ボタンにアタッチして、次の方法でページを検証します。
  3. 最初のフィールドの値 (トリミング後) が空の文字列かどうかを確認します
    • その場合は 4 に進みます
    • それ以外の場合は、値に対して検証を実行します (有効な電話番号であることを確認してください)。
      • 有効な電話番号でない場合は、エラー メッセージを表示して停止します (送信しないでください)。
      • 有効な電話番号である場合は、最初のフィールドが有効であることを示す変数を true ( firstValid = true) に設定し、手順 4 に進みます。
  4. 2 番目のフィールドの値 (トリミング後) が空の文字列かどうかを確認します
    • 空の文字列の場合は、次のことを確認してくださいfirstValid == true
      • 本当なら提出
      • それ以外の場合は、エラー メッセージを表示して停止します
    • 空でない場合は、有効な電話番号であることを確認します
      • 有効な場合は提出する
      • それ以外の場合は、停止してエラー メッセージを表示します

jQuery.submit() を使用して、実際の送信を実行できます。

于 2012-07-27T16:16:50.027 に答える
0

プラグインにはignore: ":hidden"、バージョン 1.9.0 以降のデフォルトがあります。最新バージョンに更新すると、非表示フィールドによってフォームの送信が無効になることはありません。

于 2012-10-29T16:10:08.100 に答える