异步表单提交与parsley.js

我试图创建一个使用Parsley.js验证前端和异步提交一个表单。该表单称为#contactForm，提交按钮为#sendData，当我点击空或无效表单提交时出现错误。我期望看到来自无效表单数据的“错误”警报，但它只是继续使用Else条件，并且数据由contactForm.php处理。异步表单提交与parsley.js

$(document).ready(function() { 

    // submit data on click and check if valid 
    $('#sendData').click(function(e) { 
     //check if valid with parsley 
     var valid = $('#contactForm').parsley ('validate'); 
     if (valid === false) 
     { 
      e.preventDefault(); 
     } 
     else 
     { 
      $.post("contactForm.php", $("#contactForm").serialize());  
     } 
    }); 
});

下面适当的解决方案。

来源

2013-04-01 nobody

如果验证结果是布尔值，那么您的条件应该是'if（！valid）'或'if（valid === false）'。另外，考虑在你的点击处理程序中添加一个参数'e'并执行'e.preventDefault（）;'而不是返回'false'来取消事件。 – plalx

他们还规定对[他们的网站（http://parsleyjs.org/documentation.html#parsleyform），您必须从表单中删除'数据验证=“香菜”'属性来覆盖默认处理。 – plalx

感谢您的意见@plalx我从表单属性移除数据验证=“香菜”和校正布尔条件。出于某种原因，我仍然有同样的问题。 AH-忘了我。我误解了你的评论并解决了它。再次感谢。 – nobody

以下是您的代码的外观。

$(function() { 
    $('#contactForm').submit(function(e) { 
     e.preventDefault(); 
     if ($(this).parsley().isValid()) { 
      $.post("contactForm.php", $(this).serialize());  
     } 
    }); 
});

你想赶上表单提交事件，而不是提交按钮的点击。（还有其他提交表单的方式 - 如按Enter键 - 不会触发点击，但必须处理。）
您总是希望防止默认操作。你通过Ajax提交你的表单，所以你实际上从不想用传统的方式提交表单。
没有必要比较=== false明确。（欧芹会在表格有效时返回一个真值，只是使用该值。）
$(document).ready(function() { ...是$(function() { ...。
定居在一个方式来放置大括号内。（JS中最常见的约定是“不对称”，即开始声明的一行上的{）。
您的评论是多余的。（他们说的代码说什么，所以他们不需要。）

编辑：在旧版本欧芹（2.X之前），使用

if ($(this).parsley('validate')) { 
    // ... 
}

来源

2013-04-01 07:09:46 Tomalak

感谢您的这位先生！ – CaffeineShots

非常有帮助的答案 - 代码和笔记。谢谢 –

不幸的是欧芹（'validate'）在欧芹中不可用2.x –

这是什么工作对我来说：

<form id="signupform" data-parsley-validate> 
    (....) 
</form> 

<script> 
$(function() { 
    $('#signupform').parsley().subscribe('parsley:form:validate', function (formInstance) { 
     formInstance.submitEvent.preventDefault(); //stops normal form submit 
     if (formInstance.isValid() == true) { // check if form valid or not 
      //code for ajax event here 
      $.post("createuser.php", $(#signupform).serialize()); 
    }}); 
}); 
</script>

是的，它是从parsleyjs.org例子复制。但它工作正常！

来源

2014-06-28 08:29:15 reenleedr

异步表单提交与parsley.js

回答

相关问题