Validate CKEditor value is blank (empty) in ASP.Net MVC using jQuery

Samedha
 
on Apr 21, 2022 06:15 AM
Sample_191223.zip
984 Views

Hi,

I have field which is binded using CK editor.

On submit click i want to show error incase the field is empty.

Currently it is not displaying validation message if empty.

I am developing mvc asp.net site.

Below is field.

<div class="document-editor">
    <div class="document-editor__toolbar"></div>
    <div class="document-editor__editable-container">
        <div class="document-editor__editable" name="Content">
            @Html.Raw(Model.Description)
        </div>
    </div>
</div>
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Apr 21, 2022 06:23 AM
on Jul 14, 2022 08:24 AM

You can use getData function to check the value is empty or not.

Check the sample code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Script/css.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <textarea name="editor" rows="2" cols="20" id="editor"></textarea>
    <input type="button" name="btnSave" value="Save" id="btnSave" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
    <script type="text/javascript">
        $(function () {
            var editor = CKEDITOR.replace('editor');
            $("#btnSave").click(function () {
                if (editor.getData() == "") {
                    alert('CKEditor is Empty.');
                }
            });
        });
    </script>
</body>
</html>

Demo