CODEWITHSUNDEEP
javascriptjqueryhtmljquery-forms-plugin
thebeatles1991
thebeatles1991

Reputation: 37

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();
});

Upvotes: 1

Views: 1178

Answers (2)

Danil Speransky
Danil Speransky

Reputation: 30453

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).

Upvotes: 2

Trott
Trott

Reputation: 70065

If you're using HTML5 validation, then that validation is part of what the browser does on form submission. Don't preventDefault() on form submission if you want the HTML5 validation to fire.

Upvotes: 0

Related Questions