parsley.js 验证后提交 Ajax答案

【问题标题】：Ajax submit after parsley.js validationparsley.js 验证后提交 Ajax
【发布时间】：2014-12-16 08:44:23
【问题描述】：

我有一个通过 ajax 提交的表单。工作正常。但是，我正在尝试弄清楚如何仅在 parsley 成功验证表单的情况下提交。

问题是即使 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>

【问题讨论】：

这可能有助于stackoverflow.com/a/15739186/3008050
@karan3112 是的，我看到了这个。我试图将整个 AJAX 调用放在 if ( $(this).parsley().isValid() ) 中，但它使页面在表单提交时刷新。
所以我认为这应该是你的问题。使用您的 parsley 代码编辑您的问题。
正如@karan3112 所说，在ajax 调用之前包含您正在检查Parsley 错误的javascript。因为它是行不通的。如果您的代码与上面链接中的答案类似，但仍然无法正常工作，则需要检查 javascript 错误。

标签： javascript jquery ajax parsley.js

【解决方案1】：

需要添加Parsley验证条件，如下：

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

另请注意，将“防止默认”行为设置为该过程的第一步。

【讨论】：