2
これで、カスタムルールでドロップダウンを検証しようとしています。インラインで行う必要があるため、整数値にする必要があります。つまり、提出時にオプションを選択してください。だから私はそれを無効にする必要があるかどうか、またはこれをどのように処理すべきかわかりません。ドロップダウンリストを確認する
<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>
EDIT：は現在、いくつかの理由でそのドロップダウンのための検証エラーを示していません。
の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 -->
他のアイデア？
EDIT：
私はjQueryのドキュメントの至る所で見てきたし、これを適切に行う方法を見つけることができません。
お問い合わせはどうですか？ – Marc
これまでの回答があり、何らかの理由で削除されましたが、なぜドロップダウンの検証エラーが報告されないのかという質問があります。 –
これはカスタムメソッドを必要としないようです。 「整数を選択する」オプションで空の値属性を使用して、「整数」と「必須」のルールを使用するだけで済みます。これは、a）何かが選択され、b）何かが整数である場合にのみ渡されます。 –