jquery validate CKEditor example with rules and messages

Today, We want to share with you jquery validate CKEditor example with rules and messages.In this post we will show you ckeditor required field validation php, hear for bootstrap validation ckeditor textarea we will give you demo and example for implement.In this post, we will learn about javascript validation for ckeditor textarea with an example.

jquery validate CKEditor example with rules and messages

There are the Following The simple About jquery validate CKEditor example with rules and messages Full Information With Example and source code.

As I will cover this Post with live Working example to develop ckeditor required field validation mvc, so the some ckeditor validation in codeigniter for this example is following below.

Read Also:  Laravel Eloquent Useful Tips and Tricks

ckeditor empty content Example



    <title>Validate CKEditor Using jQuery Validate - Example</title>





    .error{
        color:red;
        font-weight: 500px;
    }



<h2>Validate ckeditor using Jquery form validation</h2>
<form class="form-horizontal" role="form" name="f3" id="f3">
    <div class="col-xs-8">
        Fild Name 1: 
    </div>
    <br />
    <div class="col-xs-8">
        Fild Name 2: 
    </div>
    <br />
    <div class="col-xs-8 display_ck_edior_error">
        <textarea class="ckeditor" name="content" id="content"></textarea>
    </div>
    <div>
        
    </div>
</form>

    $("#f3").validate({
    rules: {
        field1: {
            required: true,
            minlength: 10
        },
        field2: {
            required: true,
            minlength: 10
        },
        content: {
            required: true,
            minlength: 10
        }
    },
    messages: {
        content: "Enter Describe your issue here in details"
    },
    errorPlacement: function(error, element) {
        if (element.attr("id") == "content") {
            $(".display_ck_edior_error").append(error[0]);
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function () {
        alert('Your Form Value successful submited : Good Luck..');
    }
});
    
CKEDITOR.config.toolbar = [
    ['Bold','Italic','Underline','myCombo']
] ;
//deal with copying the ckeditor text into the actual textarea
CKEDITOR.on('instanceReady', function () {
    $.each(CKEDITOR.instances, function (instance) {
        CKEDITOR.instances[instance].document.on("keyup", CK_jQ);
        CKEDITOR.instances[instance].document.on("paste", CK_jQ);
        CKEDITOR.instances[instance].document.on("keypress", CK_jQ);
        CKEDITOR.instances[instance].document.on("blur", CK_jQ);
        CKEDITOR.instances[instance].document.on("change", CK_jQ);
    });
});

function CK_jQ() {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
}



Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Selectize clear selection on Dropdown Click

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery validate CKEditor example with rules and messages.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.