Javascript Parsley.js - 在指定元素中显示错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14603908/
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.js - Displaying Errors in a Specified Element
提问by Alix Axel
Using Parsley.js, is it possible to specify the element that should hold the error messages? I tried:
使用Parsley.js是否可以指定应该保存错误消息的元素？我试过：
$('#myForm').parsley({
errors: {
container: {
$('#errorMessages')
}
}
});
But the error messages are still placed right after my form inputs.
但是错误消息仍然放在我的表单输入之后。
回答by guillaumepotier
I've added another data-attribute, data-parsley-errors-container="#element".
That could allow you modify the DOM to specify where the error messages will be displayed.
我添加了另一个数据属性，data-parsley-errors-container="#element". 这可能允许您修改 DOM 以指定将显示错误消息的位置。
More info here: http://parsleyjs.org/doc/index.html#ui-for-field
更多信息在这里：http: //parsleyjs.org/doc/index.html#ui-for-field
Best
最好的事物
回答by baba.kabira
I returned truefrom the function provided with containerkey.
我从容器密钥提供的函数返回true。
My HTML Element
我的 HTML 元素
<input type="text" class="input-small" errorSpan="yyy" id="ddd" name="ddd" value="" data-required="true">
<span id="yyy"></span>
Javascript
Javascript
$('#abc').parsley({
errors: {
classHandler: function ( elem ) {}
, container: function ( elem, template, isRadioOrCheckbox ) {
//here i have span msg. id to be displayed as custom attribute in input element
$('#' + $(elem).attr('errorSpan')).html(template);
return true;//returning back boolean makes it work
}
, errorsWrapper: '<ul></ul>'
, errorElem: '<li></li>'
}
});
It also works if I return
如果我返回它也有效
return $('#' + $(elem).attr('errorSpan')).html(template);
Hope this helps......
希望这可以帮助......
回答by guillaumepotier
You'll need to use a callback function to do so
您需要使用回调函数来执行此操作
Here a simple example to attach error messages to element parent for example.
这里有一个简单的例子，例如将错误消息附加到元素父级。
$('#myForm').parsley({
errors: {
container: function ( elem ) {
return $( elem ).parent();
}
}
});
EDIT: Working on 1.1.10-dev, I changed the way to define the errors container like above. Careful, this is a BC Break;
编辑：在 1.1.10-dev 上工作，我改变了定义错误容器的方式，如上。小心，这是一个 BC Break；
回答by Siva Anand
data-parsley-errors-container="#your-div-id"worked for me
data-parsley-errors-container="#your-div-id"为我工作
<div class="form-group">
<label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class=" datetimepicker3 input-append timepick">
<input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required" id="startTime" />
<span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>
</div>
<div id="startTimeErrorContainer"></div>
</div>
回答by GiVeR
@guillaumepotier I have try your code on jquerymobile and I do not show any error message display on screen. I want to add error-message to class "help-inline"
@guillaumepotier 我已经在 jquerymobile 上尝试过你的代码，但我没有在屏幕上显示任何错误消息。我想向“help-inline”类添加错误消息
index.html
索引.html
<script src="js/vendor/parsley.message.th.js"></script>
<script src="js/vendor/parsley.extend.min.js"></script>
<script src="js/vendor/parsley.min.js"></script>
...
<div class="control-group">
<label class="control-label" for="A0_C1">From<i class="required-icon"></i></label>
<div class="controls">
<input type="text" id="A0_C1" name="A0_C1" value="" required="required" />
<span class="help-inline"></span>
</div>
</div>
parsley.message.th.js
欧芹.message.th.js
window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, {
errors: {
container: function ( elem ) {
return $(elem).parent().find(".help-inline");
}
}
});
UPDATE - Working solution on v1.1.9-dev
更新 - v1.1.9-dev 上的工作解决方案
return $(elem).closest('.controls').find('.help-inline').append(template);
回答by Cherif KAOUA
Just define classHandler function before Parsley library import,in my case, i'm using bootstrap and it's to apply error and valid classes on parent div (it has "form-group" class).
只需在 Parsley 库导入之前定义 classHandler 函数，就我而言，我使用的是引导程序，它将在父 div 上应用错误和有效类（它具有“表单组”类）。
<script>
window.ParsleyConfig = {
classHandler: function ( parsleyField) {
// specify where parsley error-success classes will be set
return parsleyField.$element.parent();
// Change this to change the element to apply too
},
};
</script>
Now just add data-parsley validate to your form tag :
现在只需将 data-parsley 验证添加到您的表单标签中：
<form method="post" id="form1" data-parsley-validate>
When using bootstrap, you need to specify bootstrap error and valid classes too
使用引导程序时，您还需要指定引导程序错误和有效类
<form method="post" id="form1" data-parsley-error-class="has-error" data-parsley-success-class="has-success" data-parsley-validate>
In order to get the "has-error" class set on the parent div on invalid/error state (same for valid too):
为了在无效/错误状态下在父 div 上设置“has-error”类（对于有效也是如此）：
<div class="form-group has-error">
<label>Name</label>
<input class="form-control" type="text" id="name" name="name" required="" data-parsley-trigger="keyup" data-parsley-minlength="5">
<p class="help-block">Example help text here.</p>
</div>
This solution global to all fields.
该解决方案适用于所有领域。
