24

I have 4 fields where the user should enter values in at least one of them. So I am trying to validate that each of these 4 fields will be required just when all of them are empty otherwise it won't be required.

The rule seems to be working for the one field I picked to try first, but the required error remains even after I provide a value.

This is my code:

$("#ProspectDtlFrm").validate({
  rules: { 
    prsptEmail: {
      required: function(element) {
        return (
          $("#prsptHomePhone").val() == '' &&
          $("#prsptBusinessPhone").val() == '' &&
          $("#prsptMobilePhone").val() ==''
        ) 
      }                                         
    }    
  },
  messages: {
    prsptEmail: "Please enter your first name"
  }
});
MarredCheese
  • 17,541
  • 8
  • 92
  • 91
cesar
  • 241
  • 1
  • 2
  • 3

5 Answers5

40

You could use depends:

$('#ProspectDtlFrm').validate({ 
    rules: {
        prsptEmail: {
            required: {
                depends: function(element) {
                    return ($('#prsptHomePhone').val() == '' && 
                            $('#prsptBusinessPhone').val() == '' && 
                            $('#prsptMobilePhone').val() == '');
                }
            }
        }    
    }, 
    messages: { 
        prsptEmail: 'Please enter your first name'
    } 
});
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • Hi, It remains doing the same. when I enter values in the field it still keep requiring. – cesar Oct 20 '10 at 08:35
  • Let me give you more details about what I am trying to do. I have 4 fields where the user should enter values in at least one of them. So I am trying to validate that each of these 4 fields will be required just when all of them are empty otherwise it won't be required. – cesar Oct 20 '10 at 08:39
  • Hi Darin, it works when I type something into either prsptHomePhone, prsptBusinessPhone or prsptMobilePhone, but when I type something into the field Email it is still required. – cesar Oct 20 '10 at 22:45
  • The docs on the jQuery site were a little confusing. This is how I got it working. Thanks. – gen_Eric Jul 21 '11 at 15:28
  • is `depends` still supported by the jquery validate library? If not is there an updated way to do this? – johnsnails May 24 '16 at 03:13
9

The depends clause is still supported. This is from 1.11.0pre version:

normalizeRules: function(rules, element) {
  // handle dependency check
  $.each(rules, function(prop, val) {
    // ignore rule when param is explicitly false, eg. required:false
    if (val === false) {
      delete rules[prop];
      return;
    }
    if (val.param || val.depends) {
      var keepRule = true;
      switch (typeof val.depends) {
        case "string":
          keepRule = !!$(val.depends, element.form).length;
          break;
        case "function":
          keepRule = val.depends.call(element, element);
          break;
      }
      if (keepRule) {
        rules[prop] = val.param !== undefined ? val.param : true;
      } else {
        delete rules[prop];
      }
    }
  });

As you can see, yo can choose between "string" and "function". So you can use:

rules: {
  input_name_here: {
    required: {
      depends: function(element) {
        return $("#thickBoxId:checked").length;
        //or whatever you need to check
      }
    }
  }
}

Or

rules:{
  input_name_here:{
    required: '#tickBoxId:checked'
  }
}

If you only need to test for the existence of something checked.

goodeye
  • 2,389
  • 6
  • 35
  • 68
vicman4
  • 191
  • 2
  • 3
6

'depends' seems like it's not supported any more, and, their docs are not up to date.

So in the scenario where if a 'yes' tick box is checked, validate another field:

rules:{
    'name value of area you want to validate':{
        required: '#tickBoxId:checked'
    }
}
joe
  • 405
  • 4
  • 11
  • This actually worked for me. When I added depends instead of required, when #tickboxID:checked is true it submitted the whole form even other fields in the form were not filled. But above answer did the work if you put 'required' instead of 'depends.' – ugene May 25 '22 at 06:35
  • https://jsfiddle.net/ugenegrg/y5tnkvx2/81/ - Js fiddle here – ugene May 25 '22 at 07:36
5

the way is depends it's works.

    rules: {
        prsptEmail: {
            required: {
                depends: function(element){
                    if ($('#id-user').val() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
    },
    messages: {
        prsptEmail : {
            required : "please signIn!",
        }
    },
enlacee
  • 51
  • 2
  • 1
0

There is a feature just for this scenario: the require_from_group method.

https://jqueryvalidation.org/require_from_group-method

Description: Ensures a given number of fields in a group are complete.

In the options passed to the rule, supply the minimum number of fields within the group that must be complete and a selector to define the group. Then apply this rule to all the fields within the group. The form then cannot be submitted until at least the minimum number have been completed.

Part of the additional-methods.js file

I copied the example from the documentation to this snippet:

$("#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"]
    }
  }
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<form id="myform">
  <label for="mobile_phone">Mobile phone: </label>
  <input class="phone-group" id="mobile_phone" name="mobile_phone">
  <br/>
  <label for="home_phone">Home phone: </label>
  <input class="phone-group" id="home_phone" name="home_phone">
  <br/>
  <label for="work_phone">Work phone: </label>
  <input class="phone-group" id="work_phone" name="work_phone">
</form>
MarredCheese
  • 17,541
  • 8
  • 92
  • 91