通过parsley.js验证后防止表单提交

我已经使用了parsley.js很多次，并且从我最后一次使用欧芹后直接复制了代码。通过parsley.js验证后防止表单提交

但是，每次我提交表单页面刷新。 preventDefault似乎在我的其他网页上工作，并停止刷新页面，但由于某种原因，当我现在尝试它不会工作。任何人都可以找出为什么不呢？

<script> 
    $(function(){ 
     $("#register_signup").submit(function(e){ 
      e.preventDefault(); 
      var form = $(this); 
      if ($('#rform').parsley('isValid')){ 
       alert('valid'); 
      } 
     }); 
    }); 
</script> 

<form id='rform' name='rform' data-parsley-validate> 
    <input id='reg_password' class='register_input' type='text' autocomplete="off" data-parsley-trigger="change" placeholder='Password' required> 
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" placeholder='Confirm password' data-parsley-equalto="#reg_password" required> 

    <input id='register_signup' type="submit" onClick="javascript:$('#rform').parsley('validate');" value='Sign Up' /> 
</form>

来源

2014-09-21 morty

您正在将submit事件绑定到input元素。如果您检查jquery $.submit() documentation，则表明：

当用户尝试提交表单时，将提交事件发送到元素。 它只能附加到<form>元素。可以通过单击明确的<input type="submit">,<input type="image">或<button type="submit">或通过在某些表单元素具有焦点时按Enter键来提交表单。

这是你的主要问题，这就是为什么alert永远不会显示（实际上，该代码永远不会执行）。

我也会改变一些东西：

$('#rform').parsley('validate')应$('#rform').parsley().validate()，假设你使用的香菜2 *
$('#rform').parsley('isValid')应该是$('#rform').parsley().isValid()。使用$.on()代替$.submit()。
从register_signup元素中删除onClick。由于您已经在使用JavaScript，因此我会直接在JavaScript代码而不是onclick中执行此操作。这更多的是个人喜好。

所以，你的代码将是这样的：

<form id='rform' name='rform'> 
    <input id='reg_password' class='register_input' type='text' autocomplete="off" 
     data-parsley-trigger="change" placeholder='Password' required> 
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" 
     placeholder='Confirm password' data-parsley-equalto="#reg_password" required> 

    <input id='register_signup' type="submit" value='Sign Up' /> 
</form> 

<script> 
    $(document).ready(function() { 
     $("#rform").on('submit', function(e){ 
      e.preventDefault(); 
      var form = $(this); 

      form.parsley().validate(); 

      if (form.parsley().isValid()){ 
       alert('valid'); 
      } 
     }); 
    }); 
</script>

来源

2014-09-22 09:54:22

由于您使用javascript验证表单，因此应从表单中删除'data-parsley-validate'属性 – Benny 2016-10-11 07:25:39

使用您的答案代码来防止提交但不工作。任何建议？ – 2017-05-20 05:02:22

@ankitsuthar，你应该创建一个小提琴并发布一个新问题。 – 2017-05-20 11:56:55

当您将数据 - 香菜验证应用于您的表单时，您无需将JavaScript应用于表单即可停止提交，直到所有验证运行。但是，如果你应用JavaScript返回false时parsely（）无效。只要确保你已经包含parsley.js代码文件。

来源

2014-09-21 11:47:24

但后来为什么它刷新页面？ – morty 2014-09-21 12:05:13

它不令人耳目一新，它只是提交你的表格。因为如果表单验证完成，您需要设置标志返回true以提交表单，如果不返回false，则执行mot提交表单。 – 2014-09-21 12:22:26

您也可以停止提交 – 2014-09-21 12:24:35

通过parsley.js验证后防止表单提交

回答

相关问题