jQuery Validation - Select at least 3 fields of 20

Question

Hi now I search several hours for a solution. I have 20 fields (dropdowns) with the answers "yes" and "no". Now I want to validate, that the user must say to 3 of the 20 "yes". Which this are from the 20 does not matter.

For example one of the 20 dropdowns...

<select name="dd1" id="dd1">
<option value="yes">Yes</option>
<option value="no" selected="selected">No</option>
</select>

Does anyone have an idea for a solution?

For Validation I use for example this format:

 $(document).ready(function(){

    $("#register").validate({

        rules: {

            surname: {
                required: true,
                minlength: 3
            },

            messages: {
            surname: {
                required: "xxx",
                minlength: "xxx"
            },
            errorPlacement: function (error, element) {
             if ( element.is(":checkbox") )
             error.appendTo(element.parent("td").next("td"));
             else if ( element.is(":radio") )
             error.appendTo(element.parent("td").next("td"));
             else
             error.appendTo( element.parent());
            }

    });

  });

score 2 · Answer 1 · edited Jan 02 '14 at 16:54

2

if ( $('select.my20drops[value="yes"]').length > 3 ) {
    // do something!
}

edited Jan 02 '14 at 16:54

Chains

12,541
8
45
62

answered Mar 24 '13 at 00:08

adeneo

312,895
29
395
388

How can I integrate it to my script above? The Problem I have is, that there are also other dropdown on the site. But I only want to take it on this 20. For example all 20 have the class="my20drops". – TrivoXx Mar 24 '13 at 00:16
Just add the class to the selector? I don't use the validate plugin, I always roll my own validation, but I guess you have to create a new rule, but how exactly you do that is beyond me. – adeneo Mar 24 '13 at 00:18
I tried this but its doesn't work.... groups:{ my20drops:{ required: function(){ if ( $('select[value="yes"]').length > 3 ) { required: true } }}, }, And I tried it as rule but I don't know what I must enter to say that it must be all field with class="my20drops" and not only one filed... – TrivoXx Mar 24 '13 at 00:50
adeneo, [your selector always shows `"0"`](http://jsfiddle.net/acP88/). It should be: `$('select.mydrops option[value="yes"]:selected').length`; demo here: http://jsfiddle.net/acP88/1/ – Sparky Mar 24 '13 at 03:39

Sparky · Answer 2 · 2013-03-24T03:57:52.333

2

Fixing @adeneo's selector...

$('select.mydrops option[value="yes"]:selected')

Then using the plugin's addMethod method, I created a custom rule.

Working DEMO: http://jsfiddle.net/UBhce/

$(document).ready(function () {

    $.validator.addMethod('customrule', function(value, element, param) {
        return ( $('select.mydrops option[value="yes"]:selected').length >= param ); 
    }, "please select 'yes' to at least {0} items");

    $('#myform').validate({ // initialize the plugin
        groups: {
            whatever: "dd1 dd2 dd3 dd4"  // grouping all messages into one
        }
    });

    $('.mydrops').each(function() { // apply rule to all selects at once
        $(this).rules('add', {
            customrule: 3  // using a parameter for number of required selects
        });
    });

});

I also added class="mydrops" to all select elements and made sure all id's and names's are unique.

<select name="dd1" id="dd1" class="mydrops">
    <option value="yes">Yes</option>
    <option value="no" selected="selected">No</option>
</select>

edited Mar 24 '13 at 03:57

answered Mar 24 '13 at 03:19

Sparky

98,165
25
199
285

Hi thanks for your perfect help. It works! But two questions I still have. In my script I get the error message near every dropdown and not like in your demo only once. How can I integrate this? errorPlacement: function (error, element) { if ( element.is(":selected") ) error.appendTo(element.parent("td").next("td")); – TrivoXx Mar 24 '13 at 10:50
Can it be that two $(document).ready(function(){ $("#makleranmeldung").validate({ make trouble? Because if I remove the second script the script you post work fine. What can I do? – TrivoXx Mar 24 '13 at 12:01
@TrivoXx, as mentioned in code comments above, the `groups` option is used to lump all the messages into one. It's an arbitrary name followed by a "space separated list of field `name`'s". See documentation for `groups` option on this page: http://docs.jquery.com/Plugins/Validation/validate#toptions Simply use `groups` along with `errorPlacement`: http://jsfiddle.net/UBhce/1/ – Sparky Mar 24 '13 at 14:49
@TrivoXx, Since I correctly answered your original question, please "accept" my answer by clicking the green checkmark. Thanks! – Sparky Mar 24 '13 at 14:51
`if (element.is("select"))` would contain the correct selector for a ` – Sparky Mar 24 '13 at 14:58

jQuery Validation - Select at least 3 fields of 20

2 Answers2

Linked