Validating dropdown

drop-down-menu, jquery, validation

Solution

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

Problem

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> <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> </form> </div> </div> ``` Any other ideas? EDIT : I've looked everywhere in the jQuery docs and can't find how to do this properly.

Original source