Validation Plugin Causing Form To Not Validate

Validation Plugin Causing Form To Not Validate

Lost as can be my code gets validated through http://jshint.com/ but when I run my form it doesn't validate the form and the main issue I'm sure is the dropdowns I have. After the submit is pressed it goes back to my index page with the url?variables= whatever deal. I tried alerting dataString before the ajax function but that didn't even happen. 

  1. $(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','#titleForm')
     .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;
     }
     });
    });