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

Question

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

javascriptjquerydjangoparsley.js

4

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

我认为我需要添加一个自定义事件监听器来实现我所需求的功能，但我真的不确定，所以需要一些帮助。

我有一个嵌入 parsley.js 的表格。表格按预期工作，但我需要向表格添加一些功能。

当所有客户端错误被清除或提交表格时没有客户端错误时，如何向用户显示警告消息（alert('no client side errors!');）？

以下是我的表格代码示例：

<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>

- user1261774

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luís Cruz · Accepted Answer

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

<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>