Its not validating the dropdowns (styleID, statusID). I have selections made and its still saying there isn't a choice made for them.


Code:
$(document).ready(function() {
    $('div.message-error').hide();
    $('div.message-success').hide();
    
    $("#titlesForm").validate({ 
        rules: {
            titleName: {
                required: true
            },
            shortName: {
                required: true
            },
            styleID: {
                required: true,
                rangelength: [1]
            },
            statusID: {
                required: true,
                rangelength: [1]
            }
        },
        messages: {
            titleName: "Please enter a name for the title!",
            shortName: "Please enter the title's short name!",
            styleID: "Please enter the title's style!",
            statusID: "Please enter the title's status!"
        },
        submitHandler: function(form) {
            var userID = $("input#userID").val();
            var titleName = $("input#titleName").val();
            var shortName = $("input#shortName").val();
            var styleID = $("select#styleID").val();
            var statusID = $("select#statusID").val();
            var dataString = 'userID=' + userID + 'titleName=' + titleName + '&shortName=' + shortName + '&styleID=' + styleID + '&statusID=' + statusID + '&submitTitle=True';
            $.ajax({
                type: "POST",
                url: "processes/titles.php",
                data: dataString,
                success: function(myNewVar) {
                    if (myNewVar == 'good') {
                        $('div.message-error').hide();
                        $("div.message-success").html("<h6>Operation successful</h6><p>" + titleName + " Page saved successfully.</p>");
                        $("div.message-success").show().delay(10000).hide("slow");
                        $(':input','#titlesForm')
                        .not(':submit, :hidden')
                        .val(''); 
                    } else if (myNewVar == 'bad1') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + titleName + " already exists in the database.</p>");
                        $("div.message-error").show();    
                    } else if (myNewVar == 'bad2') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + shortName + " already exists in the database.</p>");
                        $("div.message-error").show();     
                    } else if (myNewVar == 'bad3') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + titleName + " and " + shortName + " already exists in the database.</p>");
                        $("div.message-error").show();     
                    } 
                }
            });
            return false;
        }
    });
});