Problems in validating a Textarea

Question

I’m having a problem validating a Textarea inside my Form, follows the code of Form:

<form class="form-horizontal form-material" id="manual-form" method="post" action="<?php echo base_url('app/servicoti/criarTI/')?>">
    <!--  Modal para botão de criação de Novo serviço-->
    <div class="modal fade " id="myModal" style="padding-top: 0px;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Cabecalho -->
                <div class="modal-header">
                    <button type="button" class="close" style="outline:0;-webkit-box-shadow:none;box-shadow: none;"data-dismiss="modal">&times;
                    </button>
                </div>
                <!-- Modal Corpo -->
                <div class="modal-body" style="padding-top:0px">
                    <h4 class="modal-title">Título</h4>
                    <input class="titulo" type="text" id="titulo" name="titulo" aria-hidden="true" style="width:100%;margin-bottom:10px;">      
                    <textarea type="text" id="conteudo" aria-hidden="true" style="width:100%;border-color:#cccccc;outline:0;-webkit-box-shadow:none;box-shadow: none;" required></textarea>

                </div>
                <!-- Modal Rodape-->
                <div class="modal-footer">
                <button type="button" class="btn " style="background-color: #1d436f;color:white;outline:0;-webkit-box-shadow:none;box-shadow: none;" data-dismiss="modal">Fechar</button>

                <!-- Botão abaixo para salvar edições feitas no conteudo do Manual -->
                <button type="submit" id="btnSubmit" class="btn" style="background-color: #1d436f;color: white;outline:0;-webkit-box-shadow:none;box-shadow: none;">Salvar</button>
                </div>
            </div>
        </div>
    </div>
</form>

This one of mine Textarea uses the tinymce for layout of your toolbar and other controls, follows its Script:

<script> 
$(document).ready(function() {
    if ($("#conteudo").length > 0) {
        tinymce.init({
            selector: "textarea",     
            theme: "modern",
            height: 300,
            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",
                "save"
            ],
            toolbar:  "insertfile undo redo |formatselect fontselect fontsizeselect fontawesome| styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons| save",
        });

    }

});
</script>

Here’s the question for one of my fields form the Script below serves me for validation:

<script type="text/javascript">
 $("#manual-form").validate({
        onkeyup: function(element) {
            this.element(element);
            },
        onfocusout: function(element) {
            this.element(element);
            },
        rules: {
            titulo:{
                required: true,            
            },
        
        },
        messages: {
            titulo: {
                required: "Campo não pode ser vazio",
                
            },     
        }
    }); 
</script>

But for the Textarea is different,I can’t use it inside this script above, it just does nothing and continues accepting empty field, put "Required" inside the tag Textarea also no use, and researching about the Tinymce found some solutions within his script to try validation, but none worked for me, I wonder if the other solution to validate my Textarea, and when I say validate it is only so that when I click my save form button, it does not let save without some content(Empty).

Answer 1

You don’t necessarily need to validate the textarea in the method validate, you can check if the textarea is empty in a normal function and thus prevent sending the form if the field is empty and shows a message, you can see it working here:

$(() => {
  $("#manual-form").on('submit', () => {
    if($("#conteudo").val() == '') {
      alert('campo vazio');
      return false;
    }
  });
})