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">×
</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).
($("#conteudo").length > 0)
?$('#tinyeditor_ifr').contents().find('body').text().trim().length
. A id#tinyeditor_ifr
é o elemento gerado pelo editor é digitado o texto.