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

parsley.js form validation - confirm when no errors found on form submission

本文关键字：发现 错误 表单提交 表单 验证 确认 js      更新时间：2023-09-26

我已经阅读了parsley.js文档，但我仍在学习JQuery，所以它是左耳进右耳出

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

我有一个形式与欧芹.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>

这段代码显示了当表单提交并且所有字段都有效时的警告消息。

<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>
相关文章：