好的,我尝试使用自定义规则来验证我的下拉菜单,并且不想内联进行,因为它需要是一个整数值。这意味着提交时不能使用“请选择一个选项”。因此,我不知道是否需要禁用它,或者该如何处理。

<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文档中到处都找不到,并且找不到正确执行此操作的方法。

最佳答案

指定自定义验证规则的正确方法是这样的:

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


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

我创建了一个example供您查看,我更改了status下拉列表以使用默认方法,并且我修复了您对自定义验证方法的其他引用,以显示其有效(这是@El Yobo建议)。我还修复了永久链接对象中的尾部逗号(这会使整个事情在许多IE版本中无法正常使用)。

10-05 20:39
查看更多