CODEWITHSUNDEEP
jquery
user752746
user752746

Reputation: 617

jQuery Validate multiple select required depends on another selectbox

I have two select box (user roles and states). If a role selected value is sale Rep. I want the states to be a required field. I've tried several ways but nothing worked. It work if I remove the "multiple" from the role select box. What am I missing? Any suggestions would be greatly appreciated! 

<select id="role" class="form-control" name="role">
   <option value="2">Sale Representative</option>
   <option value="3">Manager</option>
</select>

<select class="form-control" id="saleState" name="saleState" multiple>
   <option value="" selected>-- N/A ---</option>
   <option value="AL">Alabama</option>
   <option value="AK">Alaska</option>
</select>

Here is my script

$("#newUserForm").validate({
rules: {
  fName: "required",
  lName: "required",
  saleState: {
    required: function(element){
      if($("#role").val() == 2){
        return true;
      }else{
        return false;
      }
    }
  }
},
messages:{
  fName: "Enter your first name",
  lName: "Enter your last name",
  saleState: {
    required: "select state for sale rep."
  }
},
submitHandler: function(form) {
  form.submit();
}
});

Upvotes: 0

Views: 3139

Answers (2)

Mikael Karon
Mikael Karon

Reputation: 623

A perhaps simpler solution is to let "required" be a selector that only passes if the correct role is set.

rules: {
  fName: "required",
  lName: "required",
  saleState: {
    required: "select[name='role'] option[value='2']:selected"
  }
}

In your case the selector can be simplified to #role [value='2']:selected (note the space) for brevity.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is you have a default option element with value '', which will force the required validation in case of an non multi select, but here since you have multi select the required test is to check whether there is atleast one option is selected not whether an option with non empty value is selected. So since the empty value is selected the validation returns true.

required: function( value, element, param ) {
    // check if dependency is met
    if ( !this.depend(param, element) ) {
        return "dependency-mismatch";
    }
    if ( element.nodeName.toLowerCase() === "select" ) {
        // could be an array for select-multiple or a string, both are fine this way
        var val = $(element).val();
        return val && val.length > 0;
    }
    if ( this.checkable(element) ) {
        return this.getLength(value, element) > 0;
    }
    return $.trim(value).length > 0;
}

If you see the above validation rule, in case of multi select element .val() will return an array of selected values, so in your case it will return a array which contains an empty value as the value of the select element so val.length > 0 will return true

So 1 possible solution is to remove the empty option value

<select class="form-control" id="saleState" name="saleState" multiple>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
</select>

Demo: Fiddle

Or you can use a hack method using pattern rule like

        saleState: {
            required: function (element) {
                return $("#role").val() == 2
            },
            pattern: {
                param: /.+/,
                depend: function (element) {
                    return $("#role").val() == 2
                }
            }
        }

Demo: Fiddle

Another possible solution could be is to write a custom rule

Upvotes: 1

Related Questions