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

Question

我已经多次使用 parsley.js，并且从字面上复制了我上次使用 parsley 的代码。

但是，每次我提交表单时，页面都会刷新。 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() documentation，它会声明：

当用户尝试提交表单时，提交事件被发送到元素。 只能附加到<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. 从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>

Answer 2

如果你使用的是 parsely 2，你可以试试这个

$(function () {
//parsely event to validate form -> form:valiate
$('#rform').parsley().on('form:validate', function (formInstance) {
    //whenValid return promise if success enter then function if failed enter catch
    var ok = formInstance.whenValid()
    //on success validation
    .then(function(){
        alert('v');
        formInstance.reset();
    })
    //on failure validation
    .catch(function(){
        formInstance.destroy();
    });

$('.invalid-form-error-message')
  .html(ok ? '' : 'You must correctly fill *at least one of these two blocks!')
  .toggleClass('filled', !ok);
  // console.log(formInstance);
if (!ok)
  formInstance.validationResult = false;
  console.log(formInstance);
});

//parsely event to submit form -> form:submit
$('#rform').parsley().on('form:submit', function (formInstance) {
// if you want to prevent submit in any condition after validation success -> return it false
return false;
});

//default submit still implemented but replaced with event form:submit
$('#rform').submit(function () {
  alert('dd');
});
});

更多详情parsely documentation查看带有示例和事件的表单

Answer 3

当您将 data-parsley-validate 应用于表单时，您无需将 javascript 应用于表单以停止提交，直到所有验证运行。 但是，如果您在 parsely() 无效时应用 javascript 返回 false。 并且只要确保你有包含 parsley.js 代码文件。