jquery - jquery検証プラグインを使用した複数選択の検証

Question

受信者の複数選択がフォーム送信で検証されない理由を理解しようとしています。少なくとも1人を選択する必要があります。必須のtrueに設定しましたが、それでもエラーは表示されません。

http://jsfiddle.net/mMZYT/

JS：

var validateform = $("#pmForm").validate({
    rules: {
        recipient: {
            required: true
        },
        bcc: {
            required: true
        },
        subject: {
            required: true
        },
        message: {
            required: true
        }
    },
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
            ? 'You missed 1 field. It has been highlighted.'
            : 'You missed ' + errors + ' fields. They have been highlighted.';
            $('.box .content-form').removeAlertBoxes();
            $('.box .content-form').alertBox(message, {type: 'warning', icon: true, noMargin: false});
            $('.box .content-form .alert').css({
                width: '',
                margin: '0',
                borderLeft: 'none',
                borderRight: 'none',
                borderRadius: 0
            });
        } else {
            $('.box .content-form').removeAlertBoxes();
        }
    },
    showErrors : function(errorMap, errorList) {
        this.defaultShowErrors();
        var self = this;
        $.each(errorList, function() {
            var $input = $(this.element);
            var $label = $input.parent().find('label.error').hide();
            $label.addClass('red');
            $label.css('width', '');
            $input.trigger('labeled');
            $label.fadeIn();
        });
    },
    submitHandler: function(form) {
        var dataString = $('#pmForm').serialize();
        $.ajax({
            type: 'POST',
            url: 'http://www.kansasoutlawwrestling.com/kowmanager/pmsystem/pmsubmit',
            data: dataString,
            dataType: 'json',
            success:  function(data) {
                if (data.error) {
                    $('.box .content').removeAlertBoxes();
                    $('.box .content').alertBox(data.message, {type: 'warning', icon: true, noMargin: false});
                    $('.box .content .alert').css({
                        width: '',
                        margin: '0',
                        borderLeft: 'none',
                        borderRight: 'none',
                        borderRadius: 0
                    });
                }
                else
                {
                    $('.box .content').removeAlertBoxes();
                    $('.box .content').alertBox(data.message, {type: 'success', icon: true, noMargin: false});
                    $('.box .content .alert').css({
                        width: '',
                        margin: '0',
                        borderLeft: 'none',
                        borderRight: 'none',
                        borderRadius: 0
                    }); 
                    $(':input','#pmForm')
                    .not(':submit, :button, :hidden, :reset')
                    .val('');  
                }
            }
        });
    }
});

何か案は？

Answer 1

次のコードを使用して、必要な単一の選択を検証できます。

魔法はこの行で起こります：

ignore: ':hidden:not("#mySelect")'

デフォルトではjQueryValidateは非表示フィールドを無視するため、これが必要です...

HTML

<form action="some/action" id="myForm" method="POST">

    Select: <select class="someSelect" name="mySelect" id="mySelect" multiple="multiple">
        <option value="some_val1">Some Value</option>
        <option value="some_val2">Some Other Value</option>
    </select>

    <input type="submit" value="Submit" />

</form>

Javascript / jQuery

$(document).ready(function() {
    $('#mySelect').multiselect({
        noneSelectedText: 'Select Something (required)',
        selectedList: 3,
        classes: 'my-select'
    });

    $.validator.addMethod("needsSelection", function(value, element) {
        return $(element).multiselect("getChecked").length > 0;
    });

    $.validator.messages.needsSelection = 'You gotta pick something.';

    $('#myForm').validate({
    rules: {
        mySelect: "required needsSelection",
        input1: "required isPercent",
        input2: "required",
        input3: "required"
    },
    ignore: ':hidden:not("#mySelect")', // Tells the validator to check the hidden select
    errorClass: 'invalid'
    });
});

Answer 2

受け入れられた答えはもう機能しません。問題は、"getChecked"引数がもう何もしないということです。これは、検証メソッドの更新された作業バージョンです。

$.validator.addMethod("needsSelection", function (value, element) {
                var count = $(element).find('option:selected').length;
                return count > 0;
            })