驗證下拉菜單

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版本中不起作用）。