Submit form with at least one textbox value entered US Phone Number or International Number - jQuery Validate Plugin

Question

What I like to do is have at ONE text box value entered in order for the form to submit. I have two text boxes that are "US phone number" and "international phone number". I'm toggling back and forth with those two options using a checkbox. It defaults to Us phone number field.

For example:

If the user does not have a "US phone number" the user clicks on the "international" checkbox and it toggles to the "international phone number field". The user enters their "international phone number" and the form validates the field wonderfully. However, the user is ready to submit the form, but WAITTT the form does not submit because the other field (aka US phone number field) that is hidden is not allowing the user to submit because it is validating the field. (SEE PICTURE). I do NOT want that to happen.

My question is how do I make sure when the user does enter a value into either or field, the form will submit.

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

You can solve this by using a dependency callback .

Pseudo-code:

InternationalNumberField is required IF (InternationalCheckBox is clicked)

UsNumberField is required IF (InternationalCheckBox is not clicked)

Answer 2

Here's what you do

1. create a variable to store a value indicating if the first field contained a valid phone number
   • just declare this variable, and initialize as false (explained more later)
   • eg: var firstValid = false;
2. attach a click event handler to your submit button to validate the page via the following
3. check to see if the first field's value (after being trimmed) is an empty string
   • if so, move on to 4
   • otherwise, perform your validation on the value (ensure it's a valid phone number)
     • if it is not a valid phone number, show an error message and stop (don't submit)
     • if it is a valid phone number, set your variable indicating that the first field is valid to true ( firstValid = true ) and then move on to step 4
4. check to see if the second field's value (after trimming) is an empty string
   • if it is an empty string, check if firstValid == true
     • if it is true, submit
     • otherwise, show an error message and stop
   • if it is not empty, validate that it is a valid phone number
     • if it is valid, submit
     • otherwise stop and show an error message

You can use jQuery.submit() to perform the actual submit.

Answer 3

the plugin has had a default ignore: ":hidden" since version 1.9.0. If you update to the latest version the hidden field won't invalidate your form submission.

• link to the line of code that sets the value of ignore for versions >= 1.9.0
• some discussion of this issue on github
• plugin documentation showing options for the plugin (see 'ignore')