Jeff Davidson Jeff Davidson - 4 months ago 18
Javascript Question

Validating multiselect with jquery validation plugin

Trying to figure out why my recipient multiselect isn't validating on form submission. Should be atleast 1 person chosen. I have it set to be required true but yet its still not displaying the error.

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('');
}
}
});
}
});


Any ideas?

Answer

You can use the following code to validate the single selection required.

The magic happens in this line:

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

It's necessary because as default jQuery Validate ignores hidden fields...

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'
    });
});
Comments