在parsley.js验证后阻止表单提交

Question

我已经多次使用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>

Answer 1

您将submit事件绑定到input元素.如果你检查jquery $ .submit()文档,它说明:

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

这是您的主要问题,这就是alert永远不会显示的原因(事实上,该代码永远不会被执行).

我也会改变一些事情:

1. $('#rform').parsley( 'validate' )应该是$('#rform').parsley().validate(),假设您使用的是Parsley 2.*
2. $('#rform').parsley( 'isValid' )应该是$('#rform').parsley().isValid().
3. 用$.on()而不是$.submit().
4. onClick从register_signup元素中删除.由于您已经在使用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>