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

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

---

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

要在特定模式中显示验证错误，您需要在输入元素上使用此

数据属性

：

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

这就是如何验证

Modal

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 !");
            }
        });
    }
});

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

$（函数（）{
变量欧芹有效值选项={
//errorsWrapper:“”，
错误模板：“”，
errorClass:'错误'，
}
//检查页面上是否存在modal_div元素
如果（$（'#模态分割'）。长度>0）{
//将欧芹验证附加到模态输入元素
$（'modal_div input'）。欧芹（欧芹有效性选项）；
//在模式提交按钮上单击，验证所有输入字段
$（“#模式"分区"提交"按钮）。单击（函数（事件）{
event.preventDefault（）；
var isValid=true；
$（'#模态_divinput'）。每个（函数（）{
if（$（this）.parsley（）.validate（）！==true）
isValid=false；
})
如果（有效）{
警报（“所有字段均已验证！”）；
}
});
}
});

HTML:

$(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 !");
            }
        });
    }
});

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

名称（应为字母数字，最小长度：7）
提交

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

了解您的尝试和遇到的困难会有所帮助。最好的总是一个工作示例。请向我们展示您的代码，并指定您正在使用的模式插件。尝试提供一个工作示例，或者解释您认为这可能会起作用的原因。请在您的答案中添加一些解释，以便其他人可以从中学习-为什么其他按钮类型会有所不同？