CODEWITHSUNDEEP
jqueryvalidationjquery-chosen
hyphen
hyphen

Reputation: 967

Multi-select requiring minimum 2 selections with jquery chosen and validate plugins

I have 2 drop down menus. The first has the options of "single month" and "multiple months". If single month is selected, the second drop down is not visible, which is the desired behavior. This is the first select: 

<select name="catFrequency" class="cst-mar" id="catFrequency">
      <option value="0">single month only</option>
      <option value="1">multiple months</option>
</select>

If the first drop down has the "multiple months" option selected, the second drop down appears (a chosen multi-select), allowing the user to select multiple months:

 <select multiple name="monthSelect" id="monthSelect" value="Select Month">
   <option value='01'>January</option>
   <option value='02'>February</option>
   <option value='03'>March</option>
   <option value='04'>April</option>
   <option value='05'>May</option>
   <option value='06'>June</option>
   <option value='07'>July</option>
   <option value='08'>August</option>
   <option value='09'>September</option>
   <option value='10'>October</option>
   <option value='11'>November</option>
   <option value='12'>December</option>
</select>

I'm using the jquery validate plugin, I want to validate that if the first drop down value = 1 (multiple months), then require at least 2 months be selected from the month select menu.

I have tried various things to accomplish this, but haven't had much luck. I also read that the validate plugin ignores selects, so I've added the following bit to the settings based upon some other questions on SO.

ignore: "hidden:not(select)",

Here's the fiddle

EDIT

Ok, I'm giving Jason Raines credit for the answer for pointing me in the right direction. I used a variation of his answer and thought I'd post it here in case it could benefit someone else.

I used validate.addMethod to create a custom method. 

jQuery.validator.addMethod("minTwoMonths", function(value, element) {
    if($('#catFrequency').val() == '1') {
        var monthSelected = value;
        if(!monthSelected) {
            monthSelected = 0;
        }
        if(monthSelected.length >= '2'){
            return true;
        } else {
            $('#submitCatEdit').addClass('button_disabled').attr('disabled', true);
            return false;
        }
    } else if($('#catFrequency').val() != '1') {
        return true;
    }
}, "You must select at least 2 months in order to use an irregular category.");

Upvotes: 0

Views: 3294

Answers (1)

Jason Raines
Jason Raines

Reputation: 215

Well, this might not be the absolute BEST way to go about doing it, but it should work.

Change:

$('#editCatForm').bind('change keyup', function () {
    if ($(this).validate().checkForm()) {
        $('#submitCatEdit').removeClass('button_disabled').attr('disabled', false);
    } else {
        $('#submitCatEdit').addClass('button_disabled').attr('disabled', true);
    }
});

to

$('#editCatForm').bind('change keyup', function () {
    if ($(this).validate().checkForm()) {
        $('#submitCatEdit').removeClass('button_disabled').attr('disabled', false);
    } else {
        $('#submitCatEdit').addClass('button_disabled').attr('disabled', true);
    }
    if($('#catFrequency').val()=="1"){ var myVariable = 5; var myVariable2 = "You must select 2 or more months."; } else{ var myVariable = 2; var myVariable2 = "Please select at least one month."; }
});

The added logic at the bottom will analyze your form on each 'keyup' and set variables accordingly. Since your 'monthSelect' field passes the month values always as two digits (i.e. 01 for January, not just 1), or as comma separated values (i.e. 01,02) you can set a minimum length of 5 when multiple months is selected. Two month's selection plus the comma separating them. Now on to what do with these variables.

I assume that once the form is submitted, the editCatSubmit() function will trigger the validation process. (I did not see where editCatSubmit() was defined in the fiddle) Either way, add this bit of code to your validate() call:

rules: {

    "monthSelect": {
                        required : true,
                        minlength: myVariable
                    }
    },
messages: {
        "monthSelect": {
                        minlength: myVariable2
                    }  

    }

This will set the validation rules dynamically based on what your variables are defined as - which I covered in the first part. The only problem I can think of off the top of my head that you might face is just having to recall validate() since it's already stated onLoad. Maybe post it in a function and call it onSubmit or just recall it somewhere along the line. Either way, you get the idea.

Once again, I'm not saying this is the absolute BEST way to do this, but it's the first way that comes to mind. I hope it helps.

Upvotes: 1

Related Questions