javascript - parsley.js 表单验证 - 确认在提交表单时没有发现错误

Question

我已经阅读了 parsley.js 文档，但我仍在学习 JQuery，所以它是一只耳朵进出另一只耳朵。

我想我需要添加一个自定义事件监听器来实现我的需要，但我真的不确定，所以一些帮助将不胜感激。

我有一个嵌入了 parsley.js 的表单。该表单按预期工作，但我必须向该表单添加一些功能。

当所有客户端错误都已清除或没有客户端错误时，我将如何向用户显示警告消息(警告('没有客户端错误!')提交？

这是我的表单代码示例:

<form id="name_details_form" class="form-horizontal" method="post" data-parsley-validate>

    <div id="row_id_name_details_first_name" class="control-group">
        <label for="id_name_details_first_name" class="control-label required">First Names:</label>
        <div class="controls">
            <input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_first_name" name="name_details_first_name" class="input-xxlarge parsley-error" data-parsley-id="8581" dir="ltr"><span class="parsley-errors-list filled" id="parsley-id-8581" style="display: none;"><span class="parsley-required">This field is required.</span></span>  
        </div>
    </div>

    <div id="row_id_name_details_middle_name" class="control-group">
        <label for="id_name_details_middle_name" class="control-label ">Middle Names:</label>
        <div class="controls">
            <input id="id_name_details_middle_name" type="text" name="name_details_middle_name" data-parsley-maxlength="200" maxlength="200" class="input-xlarge" data-parsley-id="7500"><span class="parsley-errors-list" id="parsley-id-7500" style="display: none;"></span> 
        </div>
    </div>

    <div id="row_id_name_details_last_name" class="control-group  ">
        <label for="id_name_details_last_name" class="control-label required">Last Names:</label>
        <div class="controls">
            <input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_last_name" name="name_details_last_name" class="input-xxlarge parsley-success" data-parsley-id="7577" dir="ltr"><span class="parsley-errors-list" id="parsley-id-7577" style="display: none;"></span>
        </div>
    </div>

    <hr />

    <input class="btn-u btn-u-blue" type="submit" value="Add">

</form>

<script>
    ....
</script>

Answer 1

此代码在提交表单且所有字段均有效时显示警报消息。

<script>
    $(document).ready(function() {
        // bind parsley to the form
        $("#name_details_form").parsley();

        // on form submit
        $("#name_details_form").on('submit', function(event) {
            // validate form with parsley.
            $(this).parsley().validate();

            // if this form is valid
            if ($(this).parsley().isValid()) {
                // show alert message
                alert('no client side errors!');
            }

            // prevent default so the form doesn't submit. We can return true and
            // the form will be submited or proceed with a ajax request.
            event.preventDefault();
        });
    });
</script>