JQuery Confirm Plugin, requires one of two fields

Question

I have a form with two fields; mobile number. and phone number.

At least 1 field must be filled, but both of them can also be filled.

I need a jquery check to throw an error if none of them are filled only.

I have achieved this:

rules: { mobile:{ required: { depends: function(element) { return $("#regTelephone").val() === ''; } } }, telephone:{ required: { depends: function(element) { return $("#regMobile").val() === ''; } } } } 

however, if only one field is empty, that field still gets the "valid" class, which I don't want, since my valid css has a green border (so the empty field still gets a green border)

like this: how can I get an empty field (if another matters) so as not to get a valid class and therefore a green border?

Answer 1

Using the optional additional-methods.js file , there is a method called require_from_group that does exactly what you request. (You must use at least version 1.11.1 of the plugin to avoid the error of the past.)

 rules: { mobile:{ require_from_group: [1, '.mygroup'] }, telephone:{ require_from_group: [1, '.mygroup'] } }, .... 

Parameter 1 is how much of the group is required. In the HTML markup, the fields in your group should contain a class corresponding to the class specified in your second parameter.

 <input type="text" class="mygroup" name="mobile" /> <input type="text" class="mygroup" name="telephone" /> 

Working DEMO : http://jsfiddle.net/NfcxX/

My demo also shows the groups parameter, which combines multiple error messages into one.

Answer 2

 <input type="text" name="mobile" id="regMobile"> <input type="text" name="telephone" id="regTelephone"> rules: { mobile:{ required: { depends: function(element) { return $("#regTelephone").val() == '' } } }, telephone:{ required: { depends: function(element) { return $("#regMobile").val() == '' } } } }