ajaxForm not working if there is a event.preventDefault function

Good day guys, I'm trying to submit a form with a file using jQuery Form Plugin, and I'm validating the form using HTML5 attributes that's why I've added a 'event.preventDefault();'

The problem is, it's not working and it's not displaying any error message.

Here's the code

function showResponse(responseText){
    alert(responseText);
}
function beforeSub(){
    alert("called");
}
$('#prodFormBtn').click(function(){

$("#addProductForm").ajaxForm({
    beforeSubmit: beforeSub,
    success: showResponse
}).submit(function(e){
    e.preventDefault();
});

Try:

$(document).ready(function () {
  function showResponse(responseText){
     alert(responseText);
  }

  function beforeSub(){
    alert("called");
  }

  $("#addProductForm").ajaxForm(showResponse);
});

Function ajaxForm make interaction though the form by ajax, you should just set success event handler (showResponse).