[Resolvido] CKEditor + Jquery Validation plug-in

[Marcelo Garbin 30]

Bom dia pessoal,

 

Seguinte quero a ajuda de vocês, estou querendo integrar o CKEditor com o jQuery validation plug-in para que o usuário seja obrigado a não deixar em branco esse textarea.

 

 

Como posso fazer esse código?

 

 

P.S.: Aproveitando qual é esse WYSIWYG que o fórum da imasters usa?

 

Obrigado a todos :thumbsup:

[Vinicius Rangel 208]

já sabe retornar o que tem no input?

[Marcelo Garbin 30]

já sabe retornar o que tem no input?

Acredito que não rsrsrs... Se for pra validar no próprio JS não... você ja usou o Jquery Validation? queria validar com ele... ou tem que fazer uma validação separada pro CKEditor?

[Wanderson Valerio 102]

$(document).ready( function() {
$("form#contact_form").validate({
	// Define as regras
	rules:{
		content:{
			// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
			required: true
		}
	},
	// Define as mensagens de erro para cada regra
	messages:{
		campoMensagem:{
			required: "Oops, você deve preencher o conteúdo"
		}
	}
});
});

<form id="contact_form">
   <textarea name="content"></textarea>
</form>

 

Lembrando, que é bom você fazer validação na no PHP também, pois se o Javascript do usuário estiver desabilitado, complica para você.

[Vinicius Rangel 208]

só completando o amigo Wanderson, você vai ter que usar o Ajax por que você vai recuperar tudo no Jquery para fazer essa validação pelo Validate, e é possível sim integrar 2 ferramentas mais o primeiro passo é aprender retornar o dado do input que tem o plugin do CKEdtior

 

quando usei fiz da seguinte maneira:

 

var texto = CKEDITOR.replace( 'ID_DA_DIV',	{
				toolbar : [ ['Source', '-' ,'Bold', 'Underline', 'Strike', '-', 'Scayt', 'PasteText','RemoveFormat'] ],
				coreStyles_bold	: { element : 'b' },
				height: 110,
				width: 930,
				expand : false,
				enterMode: CKEDITOR.ENTER_P,
				shiftEnterMode	: CKEDITOR.ENTER_BR
			});	

 

recuperei assim

 

var texto = CKEDITOR.instances.texto.getData();

 

lembrando que se você chamar desse jeito a var titulo você pode usar o getData em qualquer lugar.

 

as configs eu deixei ai umas básicas que coloquei.

[Marcelo Garbin 30]

Iai galera segue a imagem de como eu quero validar o CKEDITOR

fiz um risco vermelho ai, quando eu clico em cadastrar aparece logo abaixo do campo para validar o mesmo com a mensagem "* Campo Obrigatório".

 

Pelo procedimento padrão do Validate como o @Wanderson Valerio postou, não funciona.

 

Como posso fazer isso com o CKEditor + Validate?

 

valeu obrigado.

 

Estou usando o código a seguir, até então está validando, porém com Alert();

Como faço para aparecer a mensagem "* Campo Obrigatório" abaixo do campo do Recado, e após o usuário escrever algo no textarea essa mensagem desaparecer??

 

 

Segue o código:

 

<script type="text/javascript">
$(document).ready(function() {
$('#form').submit(function(){
if ( CKEDITOR.instances.editortxt.getData() == '' ){
   alert( '* Campo RECADO Obrigatório!' );//an alert just to check if its working
}else{
   var editor_data = CKEDITOR.instances.editortxt.getData();
   $("#editortxt").val(editor_data); //at this point i give the value to the textarea
   $.ajax({ 
                   //do your ajax here  

                    });

       }
return false;
   });
});
</script>

[Vinicius Rangel 208]

$('#div elemento span').html('* Campo obrigatório');

 

e no seu html deixa uma caixa span vazia depois do elemento..

[Marcelo Garbin 30]

$('#div elemento span').html('* Campo obrigatório');

 

e no seu html deixa uma caixa span vazia depois do elemento..

 

Isso já fiz.. agora falta a parte de sumir com isso quando o usuário digita algo hehe...

 

Como será que posso fazer pelo CKEditor? pois aquele código(abaixo) ele até conta os input e textarea porém com o CKEditor ele perde essa propriedade... como devo prosseguir?

 

<script type="text/javascript">
$(function() {
$("#editortxt").keyup(function() {
var tamanho = $("#editortxt").val().length;
});
});
</script>

 

 

Obrigado pela ajuda.

[Vinicius Rangel 208]

<script type="text/javascript">
$(function() {
$("#editortxt").keyup(function() {
   var editor_data = CKEDITOR.instances.editortxt.getData();
   var tamanho = $(editor_data).val().length;
});
});
</script>

[Marcelo Garbin 30]

<script type="text/javascript">
$(function() {
$("#editortxt").keyup(function() {
   var editor_data = CKEDITOR.instances.editortxt.getData();
   var tamanho = $(editor_data).val().length;
});
});
</script>

 

Opa valeu.. mas ainda estou com dificuldades pra validar o CKEditor :cry:

 

 

Da uma olhada no meu código ve se me da uma luz rsrsrs...

 

<script type="text/javascript">
$(document).ready( function(){
$("#MsgAguarde").hide();
$("#form").validate({
	invalidHandler: function(form, validator) {
	  var errors = validator.numberOfInvalids();
	  if (errors) {
		var message = errors == 1
		$("#MsgAguarde").hide();
	  } else {
		$("#MsgAguarde").show();
	  }
	},
	rules:{
		departamento:{
			required: true
		},
		data:{
			required: true
		},
		recado:{
			required: true
		}
	},
	messages:{
		departamento:{
			required: "* Campo Obrigatório"
		},
		data:{
			required: "* Campo Obrigatório",
		},
		recado:{
			required: "* Campo Obrigatório",
		}
	}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("label#oculto").hide();
 $('#form').submit(function(){
if ( CKEDITOR.instances.editortxt.getData() == '' ){
	//alert( '* Campo RECADO Obrigatório!' );//an alert just to check if its working
	 $("label#oculto").show();
}else{
	/*var editor_data = CKEDITOR.instances.editortxt.getData();
	$("#editortxt").val(editor_data); //at this point i give the value to the textarea
	/*$.ajax({ 
			 //do your ajax here  
	});*/
	$("label#oculto").hide();
	$('#form').submit();

}
 return false;
 });
});
</script>
<script type="text/javascript">
$(function() {
$("#editortxt").keyup(function() {
   var editor_data = CKEDITOR.instances.editortxt.getData();
   var tamanho = $(editor_data).val().length;
	if(tamanho >= 1){ alert("teste caracter");}
});
});
</script>
<h3>Mural de Recados</h3>
<hr />
<span id="MsgAguarde" style="display:none;font-size:11px;margin:0 auto;">
<h3 style="text-align:center;color:#666;margin:5px;position:relative;display:block;left:8px;">Aguarde...</h3>
<img src="./imagens/icones/enviando.gif" alt="Aguarde.." style="text-align:center;margin:0 auto;position:relative;display:block;" />
</span>
<? if(!empty($_GET["editar"])){ ?><a href="./index.php?i=mural/mural" target="_self" id="botao" style="float:left;margin-top:0;">Voltar para Cadastro</a><? } ?>
<form id="form" name="form" action="./index.php?i=mural/cadastrar" method="post" enctype="multipart/form-data" class="formulario">   
	   <fieldset>  
          <label for="departamento">
             <span class="rotulo">Departamento <strong style="color:#F00;">*</strong></span> 
             <select name="departamento">
               <option value="">Selecionar</option>
               <? while($res = mysql_fetch_array($deptos)){
                   $id_depto = $res["id"];	
                   $depto = $res["departamento"];
               ?>
               <option <? if(!empty($_GET["editar"])){ if($ide_depto == $id_depto){  echo "selected='selected'"; } } ?> value="<?=$id_depto?>"><?=$depto?></option> 
               <? } ?>  
             </select> 
          </label>
          <label for="data" style="width:103px;">
             <span class="rotulo">Data <strong style="color:#F00;">*</strong></span>
             <input name="data" type="text" style="width:103px;" id="mask-data1" <? if(!empty($_GET["editar"])){ ?> value="<?=$data?>" <? } ?>>
          </label>  
          </fieldset>
          <fieldset>      
          <label for="recado">
             <span class="rotulo">Recado <strong style="color:#F00;">*</strong></span>
          <textarea id="editortxt" name="recado"><? if(!empty($_GET["editar"])){echo $recado;} ?></textarea>
          <label id="oculto" class="error" for="recado" generated="true">* Campo Obrigatório</label>   
          </label>           
          </fieldset>
         <fieldset class="ativo">
          <label for="ativo">
          	  <span class="rotulo">Ativo</span>
             <select name="ativo">
               <option value="1" <? if(!empty($_GET["editar"])){if($ativo == 1){echo "selected='selected'";} }?>>SIM</option>
               <option value="0" <? if(!empty($_GET["editar"])){if($ativo == 0){echo "selected='selected'";} }?>>NÃO</option>      
             </select>
		</label>
         </fieldset> 
	  <fieldset>          	  
             <? if(!empty($_GET["editar"])){ ?> 
		   <input type="hidden" name="editar" value="<?=$id?>" />
		  <? } ?>
             <input name="submit" value="<?=$bt_value?>" type="submit" />              
         </fieldset>                          
</form> 

<script type="text/javascript">
	  CKEDITOR.replace( 'editortxt', {
		 toolbar : 'MyToolbar',	
		 height: 250,
            width: 890	  
	  });
	  CKEDITOR.instances.recado.updateElement();
	  CKEDITOR.config.removePlugins = "elementspath";
	  CKEDITOR.config.resize_enabled = false;
</script>

[Marcelo Garbin 30]

Depois de muitas pesquisas achei um código que pega qualquer evento que aconteça no CKEditor.

 

Segue o código que coloquei em meu projeto:

 

<script type="text/javascript">
$(document).ready(function() {
 $("label#oculto").hide();
 $('#form').submit(function(){
if ( CKEDITOR.instances.editortxt.getData() == '' ){
	 $("label#oculto").show();
}else{
    	$('#form').submit();
}
 return false;
 });
 //oculta label
 var content_editor = CKEDITOR.instances['editortxt'];
 content_editor.on( 'key', function() {
  change_page = true;
  $("label#oculto").hide();
 });
});
</script>

 

FONTE: detecting-changes-with-ckeditor

 

Obrigado a todos pela ajuda :grin: