如何使用jquery.validate.min.js验证AJAX表单

Question

我正在使用jquery.validate.min.js来验证HTML表单，并且它在普通的HTML表单中正常工作以进行验证但是如果我使用AJAX表单提交，那么这不会验证表单并提交它验证;以下是我的代码。

这是FORM的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();
});