Syed Nizamudeen Syed Nizamudeen - 28 days ago 15
HTML Question

How to validate wysiwyg editor using bootstrap validation

Using


bootstrap3-wysihtml5-bower 2013-11-22 (WYSIWYG Editor)


and


BootstrapValidator v0.5.2


Validate textarea(bootstrap-wysihtml5 editor) using bootstrap validation. Just need to check NotEmpty and Max Characters then submit Form.

So far tried



$('#setpolicyform').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
ignore: ":hidden:not(textarea)",
fields: {
policyta: {
group: '.lnbrd',
validators: {
notEmpty: {
message: 'Textarea cannot be empty'
}
}
}
}
}).on('success.form.bv', function(e) {
e.preventDefault();
var $form = $("#setpolicyform"),
$url = $form.attr('action');
$.post($url, $form.serialize()).done(function(dte) {
$("#policy-content").html(dte);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="POST" action="self.php" name="setpolicyform" id="setpolicyform">
<div class='box-body pad'>
<div class="form-group">
<div class="lnbrd">
<textarea class="form-control textarea" name="policyta" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="submit" class="btn btn-danger pull-right" id="setpolicyformsubmitbtn"><i class="fa fa-save"></i>&nbsp;SAVE</button>
</div>
</form>





JSFiddle https://jsfiddle.net/v6s0726L/1/

Answer

There is a way to validate the WYSIWYG Editor, reason bootstrapValidator not validating it because after initializing WYSIWYG Editor on textarea name="policyta", it will be hidden and ignored by bootstrapValidator

So the one way is do not hide the textarea, just set z-index: -1 and it will go behind the WYSIWYG Editor, use WYSIWYG Editor event load to add the CSS after initializing,

CSS

.textnothide {
    display: block !important;
    position: absolute;
    z-index: -1;
}

JS

$('.textarea').wysihtml5({
    events: {
        load: function () {
            $('.textarea').addClass('textnothide');
        }
    }
});

Now let's validate the textarea with bootstrapValidator and you also asked for Max Characters limit

First bootstrapValidator script

$('#setpolicyform').bootstrapValidator({
    message: 'This value is not valid',
    //ignore: ":hidden:not(textarea)", //<---- No Need of This
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        policyta: {
            group: '.lnbrd',
            validators: {
                notEmpty: {
                    message: 'Textarea cannot be empty'
                },
                stringLength: { //<- Limit Maximum Character(s)
                    max: 50,
                    message: 'Maximum 50 Characters Required'
                }
            }
        }
    }
});

Now let's check and validate the textarea with bootstrapValidator, need another wysihtml5 event change to check the changes and re-validate

change: function () {
    $('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
}

So the Final Script will be

$(document).ready(function () {
    $('#setpolicyform').bootstrapValidator({
        message: 'This value is not valid'
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            policyta: {
                group: '.lnbrd',
                validators: {
                    notEmpty: {
                        message: 'Textarea cannot be empty'
                    },
                    stringLength: {
                        max: 50,
                        message: 'Maximum 50 Characters Required'
                    }
                }
            }
        }
    });
    $('.textarea').wysihtml5({
        events: {
            load: function () {
                $('.textarea').addClass('textnothide');
            },
            change: function () {
                $('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
            }
        }
    });
});

Fiddle Working Example