Question

我想要做的是输入 ONE 文本框值，以便提交表单。我有两个文本框，分别是“美国电话号码”和“国际电话号码”。我正在使用复选框来回切换这两个选项。它默认为我们的电话号码字段。

例如：

如果用户没有“美国电话号码”，则用户点击“国际”复选框，然后切换到“国际电话号码字段”。用户输入他们的“国际电话号码”，表格可以很好地验证该字段。但是，用户已准备好提交表单，但WAITTT表单未提交，因为隐藏的其他字段（也称为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"
        }
    }
});

}）;

Answer 1

您可以使用dependency callback来解决此问题。

的伪代码：

InternationalNumberField is required IF (InternationalCheckBox is clicked)

UsNumberField is required IF (InternationalCheckBox is not clicked)

Answer 2

这是你做的事情

创建一个变量来存储一个值，该值指示第一个字段是否包含有效的电话号码
- 只声明此变量，并初始化为false（稍后解释）
- 例如：var firstValid = false;
将Click事件处理程序附加到您的提交按钮，以通过以下
检查第一个字段的值（修剪后）是否为空字符串
- 如果是，请转到4
- 否则，对值进行验证（确保它是有效的电话号码）
  - 如果它不是有效的电话号码，则显示错误消息并停止（不提交）
  - 如果是有效的电话号码，请设置变量，指示第一个字段有效为真（firstValid = true），然后转到步骤4
检查第二个字段的值（修剪后）是否为空字符串
- 如果是空字符串，请检查firstValid == true是否为空
  - 如果确实如此，请提交
  - 否则，显示错误消息并停止
- 如果它不为空，请确认它是有效的电话号码
  - 如果有效，请提交
  - 否则停止并显示错误消息

您可以使用jQuery.submit（）来执行实际提交。

Answer 3

自版本1.9.0起，该插件的默认值为ignore: ":hidden"。如果您更新到最新版本，隐藏字段将不会使您的表单提交无效。

提交表格，其中至少输入一个文本框值US Phone Number或International Number - jQuery Validate Plugin

3 个答案: