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() documentation，则会说明：

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

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

我也会改变一些事情：

$('#rform').parsley( 'validate' )应为$('#rform').parsley().validate()。*
$('#rform').parsley( 'isValid' )应为$('#rform').parsley().isValid()。
使用$.on()代替$.submit()。
从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>

Answer 2

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

Answer 3

如果您使用的是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检查带有示例和事件的表单

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

3 个答案: