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

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

$（函数（）{
$（“#注册注册”）。提交（功能（e）{
e、 预防默认值（）；
变量形式=$（此）；
if（$（'#rform'）。欧芹（'isValid'））{
警报（“有效”）；
}
});
});

当您将数据parsley validate应用于表单时，您不需要将javascript应用于表单以停止提交，直到所有验证运行为止。 但是如果应用javascript，当parsely（）无效时返回false。

---

只需确保包含parsley.js代码文件。

您正在将

submit

事件绑定到

input

元素。如果您勾选了，则说明：

当用户试图提交表单时，提交事件被发送到元素它只能附加到

元素。可以通过单击显式的

、

或

来提交表单，或者在某些表单元素具有焦点时按Enter键来提交表单

这是您的主要问题，这就是为什么永远不会显示

警报

（事实上，该代码永远不会执行）

我还想改变一些事情：

$（'rform'）。欧芹（'validate'）

应该是

$（'rform'）。欧芹（）.validate（）

，假设您使用的是欧芹2*

$（'rform'）。欧芹（'isValid'）

应该是

$（'rform'）。欧芹（）.isValid（）

使用而不是

$.submit（）

从

register\u 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>

$（文档）.ready（函数（）{
$（“#rform”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
变量形式=$（此）；
form.parsley（）.validate（）；
if（form.parsley（）.isValid（））{
警报（“有效”）；
}
});
});

如果您使用的是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');
});
});

---

有关更多详细信息，请查看带有示例和事件的表单

，但为什么要刷新页面？它不刷新，只是提交表单。因为如果表单验证完成，您需要设置标志返回true以提交表单，如果不返回false以执行mot提交表单。您还可以停止表单提交，因为您正在使用javascript验证表单，“data parsley validate”属性应该从表单中删除，该表单用于您的应答代码，以防止提交但不起作用。有什么建议吗？@ankitsuthar，你应该创建一个提琴并发布一个新问题。只有在验证失败时，你不想触发

e.preventDefault（）

？这样，如果验证成功，则表单将正常提交，或者可能会被稍后的事件捕获和处理。@Jason，是的，您是正确的，您可以使用

else

语句并将

e.preventDefault（）

移动到该

else

。我之所以保留代码，是因为它基于这个问题，而且我习惯于使用ajax提交表单，在这种情况下，应该始终执行

e.preventDefault（）

。