好的，所以我尝试使用自定义规则验证我的下拉，并且不想内联，因为它需要是一个整数值。这意味着它在提交时无法选择请选择一个选项。所以我不知道我是否需要禁用它或者我应该如何处理它。
<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文档中无处不在，无法找到如何正确执行此操作。
答案 0 :(得分：6)
指定自定义验证规则的正确方法如下：
category: {
required: true,
valueNotEquals: "-1"
}
话虽如此，您不必创建自定义规则来处理此问题。只需使用required:true并确保选项value =“”作为默认选项，jQuery Validate将为您处理。
我已经创建了一个example供您查看，我更改了status下拉列表以使用默认方法，并且我已修复您对自定义验证方法的其他引用以显示它工作（这是@El Yobo建议的）。我还在你的永久链接对象中修改了一个尾随逗号（这会使整个东西在很多IE版本中都不起作用）。