さて、私はカスタムルールを使用してドロップダウンを検証しようとしていますが、整数値である必要があるため、インラインで検証したくありません。つまり、送信時にオプションを選択してくださいということはできません。ですから、それを無効にする必要があるのか、それをどのように処理すればよいのかわかりません。
<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ドキュメントのいたるところを調べましたが、これを適切に行う方法を見つけることができません。