Validating dropdown

Okay so I'm trying to validate my drop down with a custom rule and NOT wanting to do it inline because it needs to be a an integer value. Which means it can not have the Please Select An Option when submitted. So I don't know if I need to even make it disabled or how I should handle this.

<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 : Now for some reason its not showing the validation error for the dropdown.

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

Any other ideas?

EDIT :

I've looked everywhere in the jQuery docs and can't find how to do this properly.

Answers


The correct way to specify your custom validation rule is like this:

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

That being said, you do not have to create a custom rule to deal with this. Just use required:true and make sure the option value="" for your default option and jQuery Validate will take care of it for you.

I've created an example for you to look at, I changed the status dropdown to use the default method, and I've fixed your other references to your custom validation method to show it working (this is as @El Yobo suggested). I also fixed a trailing comma in your permalink object (which will make the whole thing not work in a lot of IE versions).


Need Your Help

jQuery CLNDR: add div within date block

javascript jquery html css calendar

I'm currently using the CLNDR plugin: http://kylestetz.github.io/CLNDR/ a great little jQuery plugin for producing calendars. Ideally I'm looking to use the calendar as an events calendar, i.e. if ...

git pull via PHP exec IIS

php git ssh exec pull

Easily the most difficult problem to diagnose that I have EVER experienced. I seem to be unable to call:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.