在parsley.js验证后阻止表单提交 [英] Preventing form submission after validation by parsley.js

问题描述

我已经多次使用过parsley.js了，并且完全复制了我上次使用欧芹的代码。

I have used parsley.js many times and have literally copied the code from my last use of parsley.

但是，每次提交表单时页面都会刷新。 preventDefault 似乎可以在我的其他页面上工作并阻止页面刷新，但由于某些原因我现在尝试时无法正常工作。任何人都可以找出原因吗？

However, every time I submit the form the page refreshes. preventDefault seems to work on my other pages and stops the page from refreshing but for some reason when I tried now it won't work. Can anyone figure out why not?

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

推荐答案

您绑定提交事件到输入元素。如果您查看 jquery $ .submit（）文档，则说明：

You are binding the submit event to a input element. If you check the jquery $.submit() documentation, it states that:

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

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.

这是你的主要问题，这就是 alert 永远不会显示的原因（事实上，那个代码是从未执行过。

This is your main problem and this is why alert will never be displayed (in fact, that code is never executed).

我也会改变一些事情：

1. $（'＃rform'）。parsley（'validate'）应该是 $（'＃rform'）。parsley（）。validate（），假设你使用的是Parsley 2. *


2. $（'＃rform'）。parsley（'isValid'）应该是 $（'＃rform'）。parsley（）。isValid（）。


3. 使用 $。on（） 而不是 $ .submit（）。


4. 从 register_signup 元素中删除 onClick 。由于您已经在使用javascript，我会直接在javascript代码而不是onclick中执行此操作。这更像是个人偏好。

1. $('#rform').parsley( 'validate' ) should be $('#rform').parsley().validate(), assuming you are using Parsley 2.*
2. $('#rform').parsley( 'isValid' ) should be $('#rform').parsley().isValid().
3. Use $.on() instead of $.submit().
4. Remove onClickfrom the register_signup element. Since you are already using javascript, I would do this directly in the javascript code instead of onclick. This is more a personal preference.

因此，您的代码将是这样的：

So, your code will be something like this:

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

这篇关于在parsley.js验证后阻止表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！