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

Probocop picture Probocop · Nov 15, 2011 · Viewed 73.1k times · Source

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?

Answer

Jeff Wilbert picture Jeff Wilbert · Nov 15, 2011

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