0

Estou com um problema para validar um Textarea dentro do meu Form, segue o código do 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>

Este meu Textarea usa o tinyMCE para layout de sua barra de ferramentas e outros controles, segue o seu 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>

Eis a questão, para um dos campos do meu form o Script logo abaixo me serve para validação:

<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>

Porém para o Textarea é diferente,não consigo usar ele dentro deste script acima, ele simplesmente não faz nada e continua aceitando campo vazio, botar "Required" dentro da Tag Textarea também não adianta, e pesquisando sobre o TinyMce achei algumas soluções dentro do script dele para tentar a validação, mas nenhuma funcionou para mim, gostaria de saber se a outra solução para validar o meu Textarea, e quando digo validar é apenas para que quando eu clicar no meu botão salvar do form, ele não deixe salvar sem algum conteúdo(Vazio).

4
  • O que faz ($("#conteudo").length > 0) ?
    – LeAndrade
    Commented 5/09/2019 às 14:05
  • Foi mais um teste que esqueci de apagar, não muda nada realmente
    – Felipebb
    Commented 5/09/2019 às 14:12
  • 1
    Acho que vc consegue verificar se o editor está vazio com $('#tinyeditor_ifr').contents().find('body').text().trim().length. A id #tinyeditor_ifr é o elemento gerado pelo editor é digitado o texto.
    – Sam
    Commented 5/09/2019 às 14:15
  • Não consegui utilizando $('#tinyeditor_ifr').contents().find('body').text().trim().length, já havia tentado algo parecido, porém já obtive minha resposta, obrigado
    – Felipebb
    Commented 5/09/2019 às 14:55

1 Resposta 1

2

Você não precisa necessariamente validar o textarea no método validate, você pode checar se o textarea está vazio em uma função normal e assim impedir o envio do formulário caso o campo estiver vazio e mostrar uma mensagem, pode ver funcionando aqui:

$(() => {
  $("#manual-form").on('submit', () => {
    if($("#conteudo").val() == '') {
      alert('campo vazio');
      return false;
    }
  });
})
2
  • Muito obrigado, me serve como validação sim, no caso o alert('campo vazio'); vem acompanhado de um localhost diz: , eu posso utilizar outras coisas no lugar do alert né? Desde ja agradecido a validação está boa
    – Felipebb
    Commented 5/09/2019 às 15:02
  • Legal que ajudou. Sim, pode utilizar qualquer outra coisa no lugar do alert, outra função, mostrar um p com a mensagem na tela, etc...
    – LeAndrade
    Commented 5/09/2019 às 15:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .