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

Posted 2023-05-09

【中文标题】Parsley js：如何验证模态弹出窗口内的输入字段并在模态本身内显示错误消息

【英文标题】：Parsley js: How to validate input fields inside Modal popup and display error messages inside the modal itself

【发布时间】：2017-10-10 07:36:28

【问题描述】：

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

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

【问题讨论】：

了解您的尝试以及遇到的困难会有所帮助。最好的总是一个有效的例子。

请向我们展示您的代码，并指定您使用的模态插件。

【参考方案1】：

要在特定的 Modal 中显示验证错误，您需要在输入元素上使用 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>

【参考方案2】：

您需要将按钮类型用作“提交”而不是“按钮”。那么这可能会解决您的问题。

【讨论】：

尝试提供一个可行的示例，或者解释您认为这可能可行的原因。

请在您的答案中添加一些解释，以便其他人可以从中学习 - 为什么其他按钮类型会有所不同？