如何使用 ParsleyJS 验证模式弹出窗口中的输入字段?
我在布局页面中已经有一个错误容器,适用于页面级输入字段。我想验证模式弹出窗口中的输入字段,并且错误消息也应该显示在弹出窗口中。
最佳答案
要在特定模态中显示验证错误,您需要使用此 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>
关于javascript - 欧芹js : How to validate input fields inside Modal popup and display error messages inside the modal itself,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43913055/