使用至少一个输入美国电话号码或国际号码的文本框值提交表单-jQuery验证插件

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

例如：

如果用户没有“美国电话号码”，则用户单击“国际”复选框并切换到“国际电话号码”字段。用户输入他们的“国际电话号码”，表单会很好地验证该字段。但是，用户已准备好提交表单，但表单未提交，因为另一个隐藏的字段（又名美国电话号码字段）不允许用户提交，因为它正在验证该字段。（见图）。我不希望这种情况发生

我的问题是如何确保当用户在或字段中输入值时，表单将提交。

--------------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>

---

}))

您可以使用

伪代码：

InternationalNumberField is required IF (InternationalCheckBox is clicked)

UsNumberField is required IF (InternationalCheckBox is not clicked)

这就是你要做的

创建一个变量来存储一个值，该值指示第一个字段是否包含有效的电话号码

• 只需声明此变量，并将其初始化为false（稍后解释）
• e、 g.：

  var firstValid=false

将click事件处理程序附加到submit按钮以通过以下方式验证页面

检查第一个字段的值（修剪后）是否为空字符串

• 如果是，请转到4
• 否则，对该值执行验证（确保它是有效的电话号码）
  • 如果不是有效的电话号码，则显示错误消息并停止（不提交）
  • 如果是有效的电话号码，请将指示第一个字段有效的变量设置为true（

    firstValid=true

    ），然后继续执行步骤4

检查第二个字段的值（修剪后）是否为空字符串

• 如果是空字符串，请检查

  firstValid==true

  • 如果是真的，请提交
  • 否则，显示错误消息并停止
• 如果它不是空的，请验证它是否是有效的电话号码
  • 如果有效，请提交
  • 否则，停止并显示错误消息

---

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

自1.9.0版以来，该插件有一个默认的

忽略：“：hidden”

。如果更新到最新版本，隐藏字段不会使表单提交无效

---

用什么？别那么含糊了，我很乐意帮助你，但你必须告诉我你有什么问题。

InternationalNumberField is required IF (InternationalCheckBox is clicked)

UsNumberField is required IF (InternationalCheckBox is not clicked)