验证下拉菜单

Question

好的，我想用自定义规则验证我的下拉菜单，并且不想将它内联，因为它需要是一个整数值。这意味着提交时不能有请选择一个选项。所以我不知道我是否需要让它停用，或者我该如何处理。

<select id="sel1R3" class="chzn-done" name="sticky" style="display: none;"> 
    <option selected="selected" value="">Please Select An Option</option> 
    <option value="0">No</option> 
    <option value="1">Yes</option> 
</select> 

编辑：现在由于某种原因，其没有显示为下拉菜单中的验证错误。

的jQuery：

$(document).ready(function() 
{ 

$.validator.addMethod("valueNotEquals", function (value, element, arg) { 
    return arg != value; 
}, "Message to User"); 

/* 
* Validate the form when it is submitted 
*/ 
var validateform = $("#newArticleForm").validate({ 
    rules: { 
     title: { 
      required: true, 
      minlength: 5 
     }, 
     category: { 
      required: true, 
      {valueNotEquals: "-1"} 
     }, 
     sticky: { 
      required: true, 
      {valueNotEquals: "-1"} 
     }, 
     comments: { 
      required: true, 
      {valueNotEquals: "-1"} 
     }, 
     datetime: { 
      required: true, 
      date: true 
     }, 
     status: { 
      required: true, 
      {valueNotEquals: "-1"} 
     }, 
     file: { 
      required: true, 
      accept: 'png|jpe?g|gif' 
     }, 
     permalink: { 
      required: true, 
     }, 
     article: { 
      required: true, 
      minlength: 5 
     } 
    }, 
    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').removeAlertBoxes(); 
      $('.box .content').alertBox(message, {type: 'warning', icon: true, noMargin: false}); 
      $('.box .content .alert').css({ 
       width: '100%', 
       margin: '0', 
       borderLeft: 'none', 
       borderRight: 'none', 
       borderRadius: 0 
      }); 
     } else { 
      $('.box .content').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 = $('#newArticleForm').serialize(); 
     $.ajax({ 
      type: 'POST', 
      url: 'dashboard/articleSubmit', 
      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','#newArticleForm') 
        .not(':submit, :button, :hidden, :reset') 
        .val(''); 
       } 
      } 
     }); 
    } 
}); 

}); 

HTML：

<div class="grid_6"> 
     <div class="box"> 
      <div class="header"> 
       <img src="http://www.kansasoutlawwrestling.com/kowmanager/assets/img/icons/packs/fugue/16x16/document--plus.png" alt="" width="16" height="16" /> 
       <h3>Create a News Article</h3> 
      </div> 
          <form method="post" accept-charset="utf-8" id="newArticleForm" enctype="multipart/form-data">     <div class="content no-padding"> 
        <div class="section _100"> 
         <label for="title">Title</label> 
         <div> 
          <input type="text" name="title" value="" />       </div> 
        </div> 

        <div class="section _100"> 
         <label for="category">Category</label> 
         <div> 
          <select name="category"> 
<option value="" selected="selected">Please Select An Opion</option> 
<option value="4">Columns</option> 
<option value="2">Headlines</option> 
<option value="1">Main News</option> 
<option value="3">Rumors</option> 
</select>       </div> 
        </div> 

        <div class="section _100"> 
         <label for="sticky">Is Sticky</label> 
         <div> 
          <select name="sticky"> 
<option value="-1">Please Select An Option</option> 
<option value="0">No</option> 
<option value="1">Yes</option> 
</select>       </div> 
        </div> 

        <div class="section _100"> 
         <label for="comments">Allow Comments</label> 
         <div> 
          <select name="comments"> 
<option value="-1">Please Select An Option</option> 
<option value="0">No</option> 
<option value="1">Yes</option> 
</select>       </div> 
        </div> 

        <div class="section _100"> 
         <label for="datetime">Date Comments Expire</label> 
         <div> 
          <input id="datetime" type="datetime" name="datetime" /> 
         </div> 
        </div> 

        <div class="section _100"> 
         <label for="status">Status</label> 
         <div> 
          <select name="status"> 
<option value="-1">Please Select An Option</option> 
<option value="0">Inactive</option> 
<option value="1">Active</option> 
</select>       </div> 
        </div> 

        <div class="section _100"> 
         <label for="file">Image</label>       <div> 
          <input type="file" name="file" value="" />       </div> 
        </div> 

        <div class="section _100"> 
         <label for="permalink">Permalink</label> 
         <div> 
          <input type="text" name="permalink" value="" />       </div> 
        </div> 

        <div class="section _100"> 
         <label for="article">Article</label> 
         <div> 
          <textarea name="article" cols="30" rows="5" id="article" ></textarea>       </div> 
        </div> 
       </div><!-- End of .content --> 

       <div class="actions"> 
        <div class="actions-left"> 
         <input type="reset" name="reset" value="Reset" id="reset" />      </div> 

        <div class="actions-right"> 
         <input type="submit" name="submit" value="Submit" id="submit" />      </div> 
       </div><!-- End of .actions --> 
      </form>   </div><!-- End of .box --> 
    </div><!-- End of .grid_6 --> 

任何其他的想法？

编辑：

我在jQuery的文档到处找，找不到如何正确地做到这一点。

Answer 1

指定自定义的验证规则正确的方法是这样的：

category: { 
    required: true, 
    valueNotEquals: "-1" 
} 

话虽这么说，你不必创建自定义规则来处理这个问题。只需使用required:true并确保选项value =“”为默认选项，jQuery Validate将为您处理它。

我已经创建了example供您查看，我将status下拉列表更改为使用默认方法，并且我修复了您的其他自定义验证方法引用以显示它的工作方式（这是@El Yobo建议）。我还修复了永久链接对象中的尾随逗号（这会使整个事情在许多IE版本中不起作用）。