Parsley js:如何在模态弹出窗口中验证输入字段并在模态本身内显示错误消息

Question

如何使用ParsleyJS验证模态弹出窗口中的输入字段？

我在布局页面中已经有一个错误容器，适用于页面级别的输入字段。我想在模式弹出窗口中验证输入字段，错误消息也应该显示在弹出窗口中。

Answer 1

要在特定的模态中显示验证错误，您需要在输入元素上使用此data attribute：

data-parsley-errors-container="#modal_div_error_container"

这是验证Modal <div>中的输入字段的方法

.JS：

$(function(){
    var parsley_valiation_options = {
         //errorsWrapper: '',
         errorTemplate: '<span class="error-msg"></span>',
         errorClass: 'error',
    }
    //check if modal_div element exists on the page
    if ($('#modal_div').length > 0) {
        //Attach Parsley validation to the modal input elements
        $('#modal_div input').parsley(parsley_valiation_options);
        //On modal submit button click, validate all the input fields
        $('#modal_div_submit_button').click(function(event) {
            event.preventDefault();
            var isValid = true;
            $('#modal_div input').each(function(){
                if($(this).parsley().validate() !== true)
                    isValid = false;
            })
            if(isValid) {
                alert("All fields are validated !");
            }
        });
    }
});

.HTML：

<!-- Modal -->
<div id="modal_div">
    <!-- Modal div error container (Validation error messages will display here)-->
    <div id="modal_div_error_container"></div>

    <label for="name">
        Name (should be alphanumeric and min length: 7)
    </label>
    <input type="text" id="name" name="name" data-parsley-minlength="7" data-parsley-minlength-message="Name must be at least 7 characters" data-parsley-required="true" data-parsley-errors-container="#modal_div_error_container"/>
    <button type="submit" id="modal_div_submit_button">Submit</button>
</div>

Answer 2

您需要

使用按钮类型作为"提交"而不是"按钮"。然后这可能会解决您的问题。