用引导程序验证器验证动态TinyMCE是一个错误还是我的代码有问题
Is it a bug to validate dynamic TinyMCE with bootstrap validator or something wrong with my code?
所有
我现在正在使用引导验证程序。但我在验证动态TinyMCE时遇到了一个问题。
如果只有1个TinyMCE,它就可以工作。
但是,如果我有超过1个TinyMCE,我的所有TinyMCE都会得到相同的错误,尽管只有1个TinyMCE不符合要求,但我的所有已经满足要求的TinyMCE也会得到同样的错误。但如果我不在我的文本区使用TinyMCE,它会起作用。我认为多个同名的TinyMCE存在问题。
我不知道怎么了。已经看到了从Bootstrap Validator验证多个名称和tinymce的例子,但无法解决这个问题。
我的代码与示例完全相同,不同的只是我在文本区域添加了TinyMCE。http://bootstrapvalidator.com/examples/adding-dynamic-field/http://bootstrapvalidator.com/examples/tinymce/
这是我的代码
<div class="panel-body hide" id="formUser">
<div class='form-group'>
<label class='control-label'>Name</label>
<input type='text' class='form-control' placeholder='Enter Name' name='Name[]' >
</div>
<div class='form-group'>
<label class='control-label'>Hobbies</label>
<textarea class='form-control' name='Hobbies[]' ></textarea>
</div>
</div>
这是添加动态TinyMCE并验证其的代码
function initTinyMCE(){
tinymce.init({
forced_root_block : "",
force_br_newlines : true,
force_p_newlines : false,
selector: "textarea#desc"+i,
theme: "modern",
width: 1287,
height: 400,
relative_urls : false,
remove_script_host: false,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor jbimages"
],
toolbar: "insertfile undo redo | styleselect | bold italic | fontselect | fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
setup: function(editor) {
editor.on('keyup', function(e) {
// Revalidate the hobbies field
$('.formUser').bootstrapValidator('revalidateField', 'Hobbies[]');
});
}
});
}
$(document).ready(function() {
//initTinyMCE();
.bootstrapValidator({
excluded: [':disabled'],
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'Name[]': {
message: 'The nameis not valid',
validators: {
notEmpty: {
message: 'The nameis required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The title must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_ ]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
'Hobbies[]': {
validators: {
callback: {
message: 'The hobbies must be between 5 and 200 characters long',
callback: function(value, validator, $field) {
// Get the plain text without HTML
var text = tinyMCE.activeEditor.getContent({
format: 'text'
});
return text.length <= 200 && text.length >= 5;
}
},
}
},
}
})
.on('click','.addUser', function() {
var $template = $('#formUser'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$option1 = $clone.find('[name="Name[]"]');
$option2 = $clone.find('[name="Hobbies[]"]');
$clone.find(".wrap").attr("id","wrap"+i);
$clone.find("textarea").attr("id","desc"+i);
$clone.find("textarea").attr("class","form-control desc"+i);
$clone.find('.wrapper').attr('id','wrapper'+i);
$clone.find('button').attr('onclick','deleteForm(''wrapper'+i+''')');
initTinyMCE();
// Add new field
$('.formUser').bootstrapValidator('addField',$option1);
$('.formUser').bootstrapValidator('addField',$option2);
i++;
})
});
正在等待你们的帮助。非常感谢你们的帮助。
谢谢
试试这个
Html
<form id="tinyMCEForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Hobbies</label>
<div class="col-md-9">
<textarea class="form-control" name="hobbies" style="height: 200px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-3">
<button type="submit" name="myBtn" class="btn btn-default">Validate</button>
</div>
</div>
</form>
Javascript
$(document).ready(function () {
tinymce.init({
selector: 'textarea',
setup: function (editor) {
editor.on('keyup', function (e) {
console.debug('Editor contents was modified. Contents: ' + editor.getContent({
format: 'text'
}));
$('#tinyMCEForm').bootstrapValidator('revalidateField', 'hobbies');
});
}
});
$('#tinyMCEForm')
.bootstrapValidator({
excluded: [':disabled'],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
hobbies: {
validators: {
callback: {
message: 'The hobbies must be between 5 and 200 characters long',
callback: function (value, validator, $field) {
// Get the plain text without HTML
var text = tinyMCE.activeEditor.getContent({
format: 'text'
});
return text.length <= 200 && text.length >= 5;
}
}
}
}
}
})
.on('success.form.bv', function (e) {
e.preventDefault();
});
});
相关文章:
- 我怎么能把一个错误当作未捕获的错误来记录呢
- 在这个使用hasOwnProperty的对象扩展程序中有一个错误,I'我不确定那个bug是什么,也不确定这个扩展
- javascript window.location在检查firebug时给了我一个错误的url路径
- new SharedWorker(“whatever.js”)返回一个错误
- JSON.parse给了我一个错误,但JSONLint说它'是一个有效的json
- 有人能向我解释一下我犯的一个错误吗
- Jasmine:测试setTimeout函数会抛出一个错误
- JavaScript中的一个错误
- 为什么jqPlot显示了一个错误的饼图,其中包含通过AJAX检索的数据
- Webrtc和socket.io:createanswer()总是有一个错误.为什么?我的代码连接了两个对等体,但其中只
- 使用 jQuery 构建一个元素会给我一个错误
- Chai 期望 [函数] 抛出一个(错误)未通过测试(使用 Node)
- 在我的 jquery 函数中得到一个错误
- Addeventlistener 已转换为 IE.也许是另一个错误
- 我有一个错误,由于某种原因,号码被更改了,而不是名字
- 我无法建立离子机器人项目..它给了我一个错误:生成cmd enont
- JQueryAJAX调用:304 respose产生一个错误
- 继续得到一个错误,即某个东西不是函数,但找不到原因
- jQuerylib会导致一个错误,直到刷新为止
- HTML图像加载触发一个错误