在parsley.js验证后提交Ajax

时间:2014-12-16 08:44:23

标签: javascript jquery ajax parsley.js

我有一个通过ajax提交的表单。工作良好。但是,如果parsley成功验证表单,我试图找出如何仅提交它。

问题是即使欧芹显示问题,表单也会提交。我怎么能允许这个?

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

1 个答案:

答案 0 :(得分:5)

您需要添加欧芹验证条件,如下所示:

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

另请注意,防止默认行为被设置为该过程的第一步。