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>

编辑：现在由于某种原因它没有显示下拉的验证错误。

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 文档中到处查看，但找不到如何正确执行此操作。

4

1 回答 1

7

指定自定义验证规则的正确方法如下：

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

话虽如此，您不必创建自定义规则来处理此问题。只需使用required:true并确保选项 value="" 作为您的默认选项，jQuery Validate 将为您处理它。

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

于 2012-04-13T15:29:11.970 回答