荷兰芹形式验证 - 事件听众 [英] Parsley Form Validation - Event Listeners
问题描述
我想在我的twitter引导项目中使用Parsley验证插件。我已经阅读了文档，但我仍然在学习JQuery，所以它正好在我的头上（我正在理性地认为它现在对我来说太高级了）。
我想向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 $ gt;< / div>'
}
}）;
$（'。test'）。parsley（{
successClass：'success'，
errorClass：'error'，
errors：{
classHandler：function（el）{
return $（el）.closest（'。form -control'）;
}，
errorElem：'< div>< / div>'
}，
onFieldValidate：function（elem）{
//如果字段不可见，则不执行任何操作。
if（！$（elem）.is（'：visible'））{
$（elem）.popover（{
placement：'top'，
title：' Test'，
content：'< div id =popOverBox>< h4> Test< / h4>< / div>'
}）;
$（elem）.popover（'show'）;
返回true;
} else {
$（elem）.popover（'hide'）;
返回false;
}
}
}）;
}）;
顶级函数的一半工作（只显示一个泡泡）只是暂时性的工作。
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 =testdata-validate =parsleynovalidate>
< input type =textname =testvalue =testdata-required =truedata-trigger =keyup change>
< / form>
任何人都可以帮我解决这个问题吗？
注意：我更喜欢引导工具提示（而不是popover），但是如果有人可以帮我解决问题，我会很感激。
您必须在您的
表单DOM中删除data-validate =parsley自动绑定代码，以允许您覆盖默认处理并纯粹使用
Parsley。 / p>
之后，您可以执行 $（'。test'）。parsley（...）。
另外请注意，您正在挂错听众。正确的方法是将它们放入 listenter：{} 属性中，如下所示：
$（'。test'）。parsley（{
listeners：{
onFieldValidate：function（elem，ParsleyField）{
console.log（validate，elem）;
return false;
}，
onFieldError：function（elem，constraints，ParsleyField）{
console.log（error，elem）;
}
}
}）;
简单的例子可以找到这里
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).
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:
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.
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.
You are doing what you shouldn't do. Looking at the Parsley docs one can see warning like this:
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.
After that you can do $('.test').parsley(...).
Also note that you are hanging listeners incorrectly. The right way is to put them inside listenter: {} property just like this:
$('.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
这篇关于荷兰芹形式验证 - 事件听众的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
