私がやりたいのは、フォームを送信するために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"
}
}
});
});