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"
}

そうは言っても、これに対処するためにカスタムルールを作成する必要はありません。デフォルトオプションのオプションvalue=""を使用required:trueして確認すると、jQueryValidateが自動的に処理します。

ご覧いただける例を作成し、ドロップダウンをデフォルトの方法を使用するように変更しstatus、カスタム検証方法への他の参照を修正して、機能していることを示しました(これは、@ El Yoboが提案したとおりです)。また、パーマリンクオブジェクトの末尾のコンマを修正しました(これにより、多くのIEバージョンで全体が機能しなくなります)。

于 2012-04-13T15:29:11.970 に答える