jQuery Validation - Two fields, only required to fill in one

I'm using the jQuery Validation Plugin on my form. On my form I have a 'Telephone' field and a 'Mobile No.' field.

How would I go about making it so the user has to fill in one of them, but it can be either field?

Solution 1:

This looks like what you need to use dependency-callback

What this will allow you to do is:

Makes the element required, depending on the result of the given callback.

You can then place a required validation rule on the two telephone fields that will only be required based on the return from the function callback; thus you can put a rule on the telephone field to say require this rule only if the mobile field is blank, and vice versa for the mobile field.

This is untested but in theory

rules: {
    telephone: {
        required: function(element) {
            return $("#mobile").is(':empty');
        }
    },
    mobile: {
        required: function(element) {
            return $("#telephone").is(':empty');
        }
    }
}

Be sure to check comments/other answers for possible updated answers.

UPDATE

rules: {
     telephone: {
          required: '#mobile:blank'
     },
     mobile: {
          required: '#telephone:blank'
     }
}

Solution 2:

I think that the correct way of do this is using the "require_from_group" method.

You can checkit on http://jqueryvalidation.org/require_from_group-method/

The example is exactly what your are searching for:

<input class="left phone-group" id="mobile_phone" name="mobile_phone">
<input class="left phone-group" id="home_phone" name="home_phone">
<input class="left phone-group" id="work_phone" name="work_phone">

<script>
$( "#form" ).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"]
    }
  }
});
</script>

It's mandatory to include additional-methods.js

Solution 3:

Came here looking for the same answers. Found the above post very helpful. Thanks.

I have extended this solution to check if the other field is in fact valid, rather than just "not empty". This ensures that the user inputs a valid Phone Number before removing the "required" class from the Mobile field and vice versa.

Mobile: {
    required: function(element) {
    return (!$("#Phone").hasClass('valid'));
    }
},
Phone: {
    required: function(element) {
        return (!$("#Mobile").hasClass('valid'));
    }
}