JQuery validation: either a valid phone or a valid email address is required

Question

The first day with jQuery validation, but not the first day with jQuery. A very simple question: I have three text inputs: name, phone and email. I want the name (no sweat), as well as the phone or email address, and make sure the login is valid on the phone or email. I tried this with:

$(document).ready(function() { $("#contactForm").validate({ debug:true, rules: { name: { required: true }, email: { email:true, required: function(element){ !$("#phone").valid(); } }, phone: { phoneUS: true, required: function(element){ !$("#email").valid(); } } }, messages: { name: "Please specify your name", email: { required: "Please enter a valid email" }, phone: "Please enter a 10 digit phone number" } }); 

});

But it fails because each validation causes a different, infinitely recursive and browser crash.

There must be some easy way to do this, but I spent about two hours and it eluded me :(

Answer 1

Well, a super simple solution, I forgot to publish it earlier - intercept the form submission, first perform a manual check, and then initiate a plugin check. Here is an example that requires one of the n flags to be selected (adapted from a real project, so it may have some typos, but you get a jist):

 (document).ready(function() { // on form submission $('form#signup').submit(function() { // make sure a checkbox is selected var checked = false; $('input.checkboxGroupMember').each(function(index) { if ($(this).attr('checked')) { checked = true; } }); if (checked == false) { // do whatever to handle the failure here $('div#feedback').html('Please select a checkbox'); return false; } else { $('form#signup').validate(); } }); // once a checkbox is selected, clear feedback $('form input.checkboxGroupMember').change(function(index) { if ($(this).attr('checked')) { $('div#feedback').empty(); } }); $('form#signup').validate(); }); 

You can easily adapt to what is required for validation, which you do not want to do with the jQuery validation plugin.

Answer 2

You can create your own method by

 $.validator.addMethod( "email_or_phone_number", (value, element) => { this.optional(element) || /*is optional*/ /^\d{10,11}$/.test(value) || /*is phone number*/ /\ S+@ \S+\.\S+/.test(value) /*is email*/ }, "Please enter either phone number or e-mail" ); 

Now you can use the email_or_phone_number method for the case with multiple data:

 <input type="text" class="{email_or_phone_number:true}" value="" /> 

You can change the regular expression in a method to suit your needs.

Answer 3

This is an old question, jQuery Groups is now the best solution. An example of jQuery groups . The check will look like this

 $( "#myform" ).validate({ rules: { mobile_phone: { require_from_group: [1, ".phone-group"] }, home_phone: { require_from_group: [1, ".phone-group"] }, work_phone: { require_from_group: [1, ".phone-group"] } } }); 

Each of the three fields will have a <telephone group class = ".

Be sure to include the extra-methods .min.js that are needed to validate groups.