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>