Как проверить форму AJAX с помощью jquery.validate.min.js

Я использую jquery.validate.min.js для проверки HTML-формы, и он отлично работает в обычной HTML-форме для проверки, но если я использую AJAX для отправки формы, это не проверяет форму и отправляет ее без какой-либо проверки; Ниже мой код.

Это HTML ФОРМЫ

<form id = "add-form">
    <label for = "roleName" class = "control-label">Test:</label>
      <label for = "roleName" class = "field prepend-icon">
      <input id = "roleName" type = "text" name = "roleName" placeholder='Role name' class = "gui-input" maxlength = "50">
      <label for = "roleName" class = "field-icon">
        <i class = "fa fa-pencil"></i>
      </label>
   </label>
   <button type = "submit" id = "add_submit">Submit</button>
   <button type = "reset" class = "hideModal">Cancel</button>
</form>

Эта проверка jQuery, которую я использую

$("#add-form").validate({
debug: false,
errorClass: "state-error",
validClass: "state-success",
errorElement: "em",
onkeyup: false,
onblur: true,
onclick: false,
rules : {
    roleName : {
        required : true,
        minlength : 2,
        maxlength : 50
    }
},
messages : {
    roleName : {
        required : 'Role name is required!'
    }
},
highlight : function(element, errorClass, validClass) {
    $(element).closest('.field').addClass(errorClass).removeClass(validClass);
},
unhighlight : function(element, errorClass, validClass) {
    $(element).closest('.field').removeClass(errorClass).addClass(validClass);
},
errorPlacement : function(error, element) {
    if (element.is(":radio") || element.is(":checkbox")) {
        element.closest('.option-group').after(error);
    } else {
        error.insertAfter(element.parent());
    }
}
}); 

По этому коду я делаю вызов AJAX

$("#add-form").submit(function(e) {
var roleName = $('#roleName').val();
$.ajax({
    type : "POST",
    url : "userroleadd.jsp",
    timeout : 60000,
    dataType : "json",
    async : false,
    data : {
        roleName : roleName
    },
    beforeSend : function() {
        $(".spinner").show();
    },
    success : function(data) {
        alert("success");       
    },
    complete : function() {
        $(".spinner").hide();
    },
    error : function(jqXHR, exception) {
        var msg = jQuery.parseJSON($.trim(jqXHR.responseText));
    }
});
e.preventDefault();
});