所有

我现在正在使用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/

10-11 23:29
查看更多