Ajax submit after parsley.js validation

Question

I have a form that submits through ajax. Works fine. However, I am trying to work out how to ONLY submit it if parsley successfully verifies the form.

The issue is that the form submits even if parsley displays an issue. How can I allow for this?

<script>
  $(document).ready(function(){
  $('#newsletterSubscribe').on('submit',function(e) {

  $.ajax({
    url:'scripts/newsletter.php',
    data:$(this).serialize(),
    type:'POST',
    success:function(data){
    console.log(data);
    $("#success").show().fadeOut(20000); //=== Show Success Message==
    },
    error:function(data){
    $("#error").show().fadeOut(20000); //===Show Error Message====
    }
  }); 
  e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
  });
  });
</script>

@karan3112 yes i saw this. I tried to put the whole AJAX call inside the if ( $(this).parsley().isValid() ) but it made the page refresh on form submission. — Alex, Dec 16 '14 at 08:49
So I think that should be your question. Edit your question with your `parsley` code. — karan3112, Dec 16 '14 at 08:53
As @karan3112 said, include the javascript where you are checking for Parsley errors before the ajax call. As it is, it won't work. In case you have your code like the answer in the link above and it still doesn't work, you'll need to check for javascript errors. — Luís Cruz, Dec 16 '14 at 13:30

score 8 · Answer 1 · answered Apr 05 '17 at 07:04

You need to add the Parsley validation condition, as following:

<script>
  $(document).ready(function(){
  $('#newsletterSubscribe').on('submit',function(e) {
  e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
  if ( $(this).parsley().isValid() ) {
     $.ajax({
       url:'scripts/newsletter.php',
       data:$(this).serialize(),
       type:'POST',
       success:function(data){
       console.log(data);
         $("#success").show().fadeOut(20000); //=== Show Success Message==
       },
       error:function(data){
         $("#error").show().fadeOut(20000); //===Show Error Message====
       }
     }); 
   }
  });
  });
</script>

Note also that the Prevent Default behavior is set as a first step in the process.

Ajax submit after parsley.js validation

1 Answers1