用引导程序验证器验证动态TinyMCE是一个错误还是我的代码有问题

Is it a bug to validate dynamic TinyMCE with bootstrap validator or something wrong with my code?

本文关键字:一个 错误 有问题 代码 我的 程序验证器 验证 动态 TinyMCE      更新时间:2023-09-26

所有

我现在正在使用引导验证程序。但我在验证动态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();
    });
});