Validar campo TinyMCE

Citar

Escrito el 19 Ene 2008 06:43 pm

Hola a todos, mi consulta es la siguiente:

¿como puedo validar que el contenido del editor textarea TinyMCE no permita vacios? ya que de la forma tradicional con js no funciona.

Si es un textarea normal se valida, pero si lo habilito como editor textarea no cumple la condición.

desde ya muchas gracias

Por djmashe

1 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Ing. en Informática

@djmashe

Citar

Escrito el 19 Ene 2008 09:12 pm

Si alguien te ayuda, estupendo.
Yo, con la información que das... no sé ni a qué te refieres...
sorry

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 20 Ene 2008 02:28 pm

Esta es la situación: Tengo un formulario normal que tiene el <textarea> como editor con el TinyMCE, por lo que en este caso no puedo validar con js el contenido del mismo.

Código :

 <form name="formu" method="post" action="insertar_registro.php" enctype="multipart/form-data" onSubmit="return validar(this);">
 Título <input type="text" name="titulo" size="80">
 <textarea name="editor" id="editor" cols="140" rows="25""></textarea>
</form>

Y uso el siguiente js para validar los dos campos:

Código :

<script language="javascript" type="text/javascript">
 function validar(form)
 {
  if (form.titulo.value == "")  { alert ("campo Titulo vacio"); return false; }
  if (form.editor.value == "") { alert ("campo Editor vacio"); return false; }
  return true;
 } 
</script>

Pero solo me valida el campo titulo y no el campo editor. Ahora cuando agrego el script del TinyMCE, al comienzo del mismo hay una declaración que es la que permite asociar a dicho textarea como editor:

Código :

  tinyMCE.init
  ({
    mode : "textareas",
   language : "es",
   auto_focus : "editor",
    ...
  });

Y es eso lo que me impide validarla como form.editor.value ya que ahora es la variable tinyMCE la que controla al textarea, pero tampoco puedo usarla así:

Código :

if (form.tinyMCE.value == "") { alert ("campo Editor vacio"); return false; }

Ahora que quedo un poco más detallado :wink:

, espero que alguien pueda ayudarme. Desde ya muchas gracias.

Por djmashe

1 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Ing. en Informática

@djmashe

Citar

Escrito el 20 Ene 2008 04:31 pm

Vamos a ver si lo he entendido:
Tu quieres:

Código :

- Presentar un formulario: <titulo> y <editor>.
- Que el usuario lo rellene.
- Si algúno de los campos, <titulo> o <editor> están vacíos (==""), que no se envíe el formulario.
- Si [u]los dos[/u] están rellenados (!=""), que se envíe a "insertar_registro.php"

Pues eso, con el código que has puesto, ocurre perfectamente (al menos, con FireFox):

Con sólo esto, pasa lo que pides (valida bien).
Otra cosa... es el rollo de "TinyMCE", que para lo que pides, no es necesario, y tampoco sé que otra utilidad tiene.

Aún así, no se si el <script> que has escrito es compatible para todos los navegadores (creo que sí, aunque no estoy acostumbrado al "this", sino al "document.getElementById", y "compatibles").

PD: Esta otra forma, también cumple con lo que pides, y es compatible si construyes la función "compatible" para el "document.getElementById"

Que por cierto, no usa el "alert", algo bastante molesto, sino que escribe el motivo del error en un <div> vacío, preparado a tal efecto, cosa que no estaría de más que aprovecharas, para evitar dicho "alert".

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 31 Ene 2008 08:31 pm

Tambien tuve el mismo problema y no encontré al respecto información que me ayude con el problema.

Después de probar varias cosas entendí que cuando se envía el formulario el campo toma el valor. Cuando se hace un onSubmit para validar los campos encuentro que aun no está la información en el campo asociado al editor TinyMCE. Por tal razón decidí hacer una variación en mi script de validación que aparentemente funciona bien.
La idea de dicho escript es utilizar un onSubmit donde se validan todos los demás campos y por ultimo llamo otra función con un setTimeout para retardar el proceso y por último retorno falso en la validación. En este caso el formulario no se envía pero se actualiza el campo asociado al editor mientras que se ejecuta otra función que puede validar el campo que está actualizado; esta se encarga de enviar ó no el formulario.
Espero que te sirva el script. Aquí dejo un ejemplo:

Codigo Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="520" border="0" cellpadding="0" cellspacing="1" bgcolor="#F7F7F7">
<tr>
<td bgcolor="#FDFDFD"><form action="" method="post" name="formx" onSubmit = "return validarfrm(this)">
<table width="520" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125" height="25"> Tipo: </td>
<td width="395"><select name="tipo_sol" id="tipo_sol">
<option value="nd">Seleccionar>></option>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
</select></td>
</tr>
<tr>
<td height="30" colspan="2"> Descripcion</td>
</tr>
<tr>
<td height="30" colspan="2"> <div align="center">
<textarea name="txtdescripcion" cols="55" rows="6" id="txtdescripcion"></textarea>
</div></td>
</tr>
<tr>
<td>  </td>
<td> </td>
</tr>
<tr>
<td height="30"> </td>
<td><input type="submit" name="Submit" value="enviar"> </td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>

Script de validación:

<script language="javascript">
function validarfrm(frm){

if(frm.tipo_sol.value=='nd'){
alert ("Debe seleccionar el Tipo!");
return false;
}
setTimeout("enviarfrm()",100);
return false;
}
function enviarfrm(){
frm=document.formx;
if(frm.txtdescripcion.value.length<15){
alert ("Debe ingresar una decripción válida!");
return false;
}

if(confirm("Confirma enviar?")){
frm.submit();
}
}
</script>

Por waltherfbg

0 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 04 Feb 2008 10:07 pm

yo uso jquery (amo jquery, y no me pagan por decir eso

)

Para validar formularios uso jquery.validator un plugin de jquery.
Y para validar el TinyMCE lo que hago es, cuando el evento submit es disparado o cuando se hace click al boton del formulario.

Código :

$(function(){ // ready event
   $('button').click(function(){
           if (tinyMCE) tinyMCE.triggerSave(); //<========= Esto esta bien escondido en el manual del tinyMCE
   });
   $('form').validate();   
});

Saludos!

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Email Web

Lima, Perú

@jos_

Citar

Escrito el 04 Feb 2008 10:10 pm

Olvidaba el link a la pagina donde descargar el validator

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Email Web

Lima, Perú

@jos_

Citar

Escrito el 03 Jul 2010 11:06 pm

Gracias, tu respuesta me ha servido de mucho, de verdad no creo que hubiese encontrado ese comando por mi mismo jejeje :lol:

Por Takashi

Claber

105 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Caracas - Venezuela

@takashius

Citar

Escrito el 09 Nov 2010 08:20 am

Si no quieres utilizar jquery y quieres validar un campo con tinymce puedes hacerlo asi:

// Obtenemos el contenido del campo creado por el editor tinymcE, el código html del editor
var contenido = tinyMCE.get("ID_DEL_CAMPO_A_VALIDAR").getContent();
if (contenido.length == 0){
document.getElementById("ID_CONTENEDORA").setAttribute("class","error_box");
buffer = buffer + "\nNo has escrito el contenido del bloque de la fila "+i+".";
}else{
document.getElementById("ID_CONTENEDORA").removeAttribute("class");
}

Como referencia puedes buscarlo aqui:
http://wiki.moxiecode.com/index.php/TinyMCE:Functions#tinyMCE.getContent
y tambien aqui
http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=30787

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Validar campo TinyMCE

Escribe una respuesta rapida