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

Question

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

Answer 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

Answer 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'));
    }
}

Answer 4

I had troubles is .is(':empty') so here is my working options example.

Before:

rules: {
   name:       {required: true},
   email:      {required: true},
   phone:      {required: true}
}

All fields were required. But I wanted email and/or phone so to create the 'or':

rules: {
   name:       {required: true},
   email:      {required: 
                    function() {
                        //returns true if phone is empty   
                        return !$("#phone").val();
                    }
               },
   phone:      {required:
                    function() {
                        //returns true if email is empty
                        return !$("#email").val();
                     }
               }
},
messages: {
   email: "Email is required if no phone number is given.",
   phone: "A phone number is required if no phone email is given."
}

And you will see that I've added the messages option to give the user some meaningful info because the default messages would say that each field is required which is not true in this situation.

Answer 5

Requirement is Validation need to be either C or (A and B) is required. The thing worked for me is:

$.validator.addMethod("multipeFieldValidator", function(value) { 
    var returnVal = false; 
    if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) {
        returnVal = true;
    }
    return returnVal; 
}, 'Either C or A and B is required');


$('#Afield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Cfield").valid();

});

$('#Bfield.form-control').change(function(){
    $(this).valid();
    $("#Afield").valid();
    $("#Cfield").valid();
});

$('#Cfield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Afield").valid();
});


within rules I have 
Afield: "multipeFieldValidator",
Bfield: "multipeFieldValidator",
Cfield: "multipeFieldValidator"