我喜欢做的是输入一个文本框值以提交表单。我有两个文本框，分别是“美国电话号码”和“国际电话号码”。我正在使用复选框来回切换这两个选项。它默认为我们的电话号码字段。
例如：
如果用户没有“美国电话号码”，则用户点击“国际”复选框并切换到“国际电话号码字段”。用户输入他们的“国际电话号码”，表单就可以很好地验证该字段。但是，用户已准备好提交表单，但 WAITTT 未提交表单，因为隐藏的其他字段（即美国电话号码字段）不允许用户提交，因为它正在验证该字段。（见图）。我不希望这种情况发生。
我的问题是如何确保当用户在其中一个字段或字段中输入值时，表单将提交。
--------------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"
}
}
});
});