[英]Redactor JS - validate form using BootstrapValidator
I'm having a Rails app where I use Redactor for rich text input. 我有一个Rails应用,其中使用Redactor进行富文本输入。 The form is placed inside a Bootstrap modal.
表单放置在Bootstrap模式中。 I want to validate (presence) while the user types, and show a validation error if the field is empty.
我想在用户键入时进行验证(状态),如果该字段为空,则显示验证错误。 I'm using BootstrapValidator for the validation part.
我将BootstrapValidator用于验证部分。 I currently don't get any validation messages for the
redactor
text area. 我目前没有收到关于
redactor
文本区域的任何验证消息。
The relevant part of the code looks like this: 代码的相关部分如下所示:
= form_for idea, remote: remote, html: {role: :form, "data-model" => 'idea', multipart: true} do |f|
# This field / validation works
.form-group
= f.label :title, "Title", :class => "required"
= f.text_field :title, :class => "form-control"
# This does not
.form-group
= f.label :description, :class => "required"
= f.text_area :description, :class => "form-control big-text-area redactor"
And the Javascript looks like this: Javascript如下所示:
:javascript
$('#new_idea').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'fa fa-check-square',
invalid: 'fa fa-warning',
validating: 'fa fa-circle-o-notch spin'
},
fields: {
"idea[title]": {
validators: {
notEmpty: {
message: 'The title is required'
}
}
},
"idea[description]": {
validators: {
callback: {
message: 'The idea description is required',
callback: function(value, validator) {
# NOTE: This part of the code never get called
var code = $('[name="idea[description]"]').code();
return (code !== '' && code !== '<p><br></p>');
}
}
}
}
}
})
$('.redactor').redactor({
keyupCallback: function (e) {
validateEditor();
}
});
function validateEditor() {
$('#new_idea').bootstrapValidator('revalidateField', "idea[description]");
};
Any ideas on what I can do to get the validation to work? 关于如何使验证生效的任何想法?
I ran into something similar when using Redactor so perhaps this will help. 我在使用Redactor时遇到了类似的问题,因此这可能会有所帮助。 In my case, I had a change listener on the textarea to which Redactor was bound to (a similar approach to what I believe Bootstrap Validator is doing) but the problem was that Redactor was eating the change event on the original textarea.
就我而言,我在Redactor绑定到的文本区域上有一个更改侦听器(类似于我认为Bootstrap Validator所做的工作),但是问题是Redactor在原始文本区域上吃了更改事件。 To get around this, I implemented the following when initializing the Redactor plugin.
为了解决这个问题,我在初始化Redactor插件时实现了以下内容。
var $mytextarea = $('selector-for-textarea');
$mytextarea.redactor({
changeCallback: function( html ) {
$mytextarea.trigger( 'change' );
}
});
Hope this helps, cheers. 希望这会有所帮助,欢呼。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.