twitter-bootstrap 欧芹表单验证 - 事件侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20072178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parsley Form Validation - Event Listeners
提问by Edward
Ok, so i have searched everywhere for this but still can't get it working. No one seems to have tried it but i'm sure it can do it.
好的，所以我到处搜索这个，但仍然无法让它工作。似乎没有人尝试过，但我相信它可以做到。
I want to use the Parsley validation plugin with my twitter bootstrap project. I have read the docs, but am still learning JQuery so it's going right over my head (i'm rationalising that it is too advanced for me at the moment).
我想在我的 twitter bootstrap 项目中使用 Parsley 验证插件。我已经阅读了文档，但我仍在学习 JQuery，所以它在我的脑海中浮现（我认为它目前对我来说太先进了）。
I want to add a custom event listener to Parsley to show a popup on error instead of the ugly li's. This is what i have tried:
我想向 Parsley 添加一个自定义事件侦听器，以在错误时显示弹出窗口，而不是丑陋的 li。这是我尝试过的：
JQUERY
查询
$(document).ready(function () {
$('.parsley').parsley({
successClass: 'success',
errorClass: 'error',
errors: {
classHandler: function(el) {
return $(el).closest('.form-control');
},
errorsWrapper: '<div class=\"popover fade top in\" style=\"top: -20px\"></div>',
errorElem: '<div></div>'
}
});
$('.test').parsley({
successClass: 'success',
errorClass: 'error',
errors: {
classHandler: function(el) {
return $(el).closest('.form-control');
},
errorElem: '<div></div>'
},
onFieldValidate: function ( elem ) {
// if field is not visible, do nothing.
if ( !$( elem ).is( ':visible' ) ) {
$(elem).popover({
placement : 'top',
title : 'Test',
content : '<div id="popOverBox"><h4>Test</h4></div>'
});
$(elem).popover('show');
return true;
} else {
$(elem).popover('hide');
return false;
}
}
});
});
The top function half works (only displays a bubble) was only a hack to get it working temporarily.
顶部功能 half work（只显示一个气泡）只是为了让它暂时工作的一个技巧。
HTML
HTML
<head>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/lib/parsley/parsley.min.js"></script>
</head>
<form class="test" data-validate="parsley" novalidate>
<input type="text" name="test" value="test" data-required="true" data-trigger="keyup change">
</form>
Can anyone help me get this working? Note: I would prefer the bootstrap tooltip (as opposed to popover) but would be grateful if someone could help me with either.
谁能帮我解决这个问题？注意：我更喜欢引导程序工具提示（而不是弹出窗口），但如果有人可以帮助我，我将不胜感激。
回答by twil
You are doing what you shouldn't do. Looking at the Parsley docsone can see warning like this:
你在做你不应该做的事。查看Parsley 文档可以看到如下警告：
you must remove data-validate="parsley" auto-binding code in your forms DOM to allow you to override the default processing and use Parsley purely from javascript.
您必须删除表单 DOM 中的 data-validate="parsley" 自动绑定代码，以允许您覆盖默认处理并完全从 javascript 使用 Parsley。
After that you can do $('.test').parsley(...).
之后你就可以了$('.test').parsley(...)。
Also note that you are hanging listeners incorrectly. The right way is to put them inside listenter: {}property just like this:
另请注意，您错误地悬挂了听众。正确的方法是listenter: {}像这样将它们放入属性中：
$('.test').parsley({
listeners: {
onFieldValidate: function(elem, ParsleyField) {
console.log("validate", elem);
return false;
},
onFieldError: function(elem, constraints, ParsleyField) {
console.log("error", elem);
}
}
});
Simple example could be found here
简单的例子可以在这里找到
回答by Waseem Safder
You can simple check if your form is validated or not by using following code.
您可以使用以下代码简单检查您的表单是否经过验证。
$( '#formId' ).parsley( 'isValid' );
回答by Edward
I ended up using this in conjunction with bootstrap tooltips, the below snippet adds a title to invalid fields.
我最终将其与引导程序工具提示结合使用，以下代码段为无效字段添加了标题。
parsleyContainer= Field container, this could be a <form>tag for example
parsleyContainer= 字段容器，<form>例如可以是标签
var parsleyContainer = $(this).closest('.tab-pane');
$(parsleyContainer).attr('data-parsley-validate', 'true');
$(parsleyContainer).parsley({
errorsContainer: function (ParsleyField) {
return ParsleyField.$element.attr("title");
},
errorsWrapper: false,
});
if($(parsleyContainer).parsley().validate()) {
//do something is validated
}
