驗證多選與jQuery驗證插件

Question

試圖找出爲什麼我的收件人multiselect不驗證表單提交。應至少選擇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")' 

這是必要的，因爲默認jQuery驗證忽略隱藏字段...

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