使用jqueryvalidation插件validation多选

试图弄清楚为什么我的收件人multiselect没有在表单提交上validation。 应至少选择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

您可以使用以下代码validation所需的单个选择。

魔术发生在这一行：

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

这是必要的，因为默认情况下jQuery Validate会忽略隐藏字段…

HTML

 
 Select:  Some Value Some Other Value    

使用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"参数不再执行任何操作。 这是validation方法的更新工作版本

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