how to prevent submitting a form with empty CKEditor in django

Question

In my django project, I use Django CKEditor for getting richtextfield in a message form.

I want to prevent the user from submitting an empty message.

this is my simplified form in one of my templates:

<form action="{% url 'contact' %}" method="POST" enctype="multipart/form-data">
        {% csrf_token %}

        <div class="form-row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="form-group">

                    <div class="row">

                        <div class="col-1 mr-auto">
                            <label for="message" class="col-form-label">Message:</label>
                        </div>

                        <div class="col-10 ml-auto">
                            <textarea   name="message" 
                                        id="message" 
                                        class="form-control" 
                                        maxlength="4096" 
                                        onkeyup="textCounter(this,'counter',4096);" 
                                        autofocus required ></textarea>
                        </div>
                        

                    </div>
                    
                    
                </div>
            </div>
        </div>

        <!-- Submit button -->
        <div class="form-row">
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 mx-auto">
                <div class="form-group">
                  <button class="btn  text-capitalize font-weight-bold  text-light btn-block" 
                          type="submit"
                          value="Send" >
                          Send
                  </button>
                </div>
            </div>
        </div>
        

</form>
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
<script src="//cdn.ckeditor.com/4.15.0/full/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'message' );
    CKEDITOR.config.allowedContent = true;
    CKEDITOR.config.removeFormatAttributes = '';
    CKEDITOR.config.ignoreEmptyParagraph = false;
    CKEDITOR.config.toolbarGroups = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'forms', groups: [ 'forms' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
    ];
    CKEDITOR.config.removeButtons = 'Source,Save,NewPage,ExportPdf,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,SelectAll,Form,Checkbox,Radio,TextField,CopyFormatting,RemoveFormat,Italic,Underline,Strike,Subscript,Superscript,Textarea,Select,Button,ImageButton,HiddenField,Blockquote,CreateDiv,Outdent,Indent,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Language,Link,Image,Flash,Unlink,Anchor,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,FontSize,Font,Format,Styles,TextColor,ShowBlocks,Maximize,About,BGColor';
</script>

from How to check whether CKEditor has some text in it? I know how to check if the text inputfield has some text in it or not, but how to stop the user from submittng the form if it is empty?

I don't know much about js or jquery, a python way would be great.

score 0 · Answer 1 · answered Dec 09 '20 at 07:06

Just found the answer:

set name and id for form:

<form name="messageform" id="messageform" action="{% url 'contact' %}" method="POST" enctype="multipart/form-data">

write a function which returns false to form if the editor is empty:

<script type="text/javascript">

  $('#messageform').submit(function() 
  {
      if (jQuery("#cke_1_contents iframe").contents().find("body").text() === "") {
          alert('Please enter your message.');
      return false;
      }
  });
  
</script>

how to prevent submitting a form with empty CKEditor in django

1 Answers1