所有
我现在正在使用Bootstrap验证程序。但是我在验证动态TinyMCE时遇到问题。
如果只有1个TinyMCE,它将起作用。
但是,如果我的TinyMCE超过1个,虽然只有1个TinyMCE不满足要求,但我所有的TinyMCE都将得到相同的错误,但已经满足要求的所有TinyMCE也将得到相同的错误。
但是,如果我不在我的文本区域上使用TinyMCE,它将起作用。我认为多个同名的TinyMCE出现问题。
我不知道怎么了。已经从Bootstrap Validator中看到了验证多个名称和tinymce的示例,但是无法解决此问题。
我的代码与示例完全相同,只是我在textarea上添加了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>
Java脚本
$(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();
});
});
关于javascript - 使用 bootstrap 验证器验证动态TinyMCE是一个错误,还是我的代码有问题?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26459240/