Validar campo TinyMCE

djmashe · #1 (**permalink**) 10/01/2008, 17:46

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

waltherfbg · #2 (**permalink**) 31/01/2008, 14:41

Cita:

Iniciado por djmashe

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

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>

saludos. Walther Bojaca

carloshto · #3 (**permalink**) 02/04/2008, 06:10

Usa esta llamada tinyMCE.execCommand('mceSave') en el vento onclick del boton submit

Mandete · #4 (**permalink**) 18/11/2008, 14:16

Lamento recuperar un hilo antiguo pero me estoy volviendo loco con el TinyMCE y validar el textArea. No he conseguido hacerlo ni con una función retardo ni usando ese comando antes de enviar el form.

Mi código actual es el siguiente:

parte javascript

Código:

function validarForm(opcion){ //FUNCION PARA VALIDAR EL FORMULARIO Y EVITAR DEJAR CAMPOS EN BLANCO
    valida=1
    
    if(document.form1.titulo.value.length==0){
        //alert("Todos los campos son obligatorios")
        document.form1.titulo.focus()
        valida=0
    } 
     
    if(document.form1.texto.value.length==0){
        //alert("Todos los campos son obligatorios")
        document.form1.texto.focus()
        valida=0
    }
    
 
    if(document.form1.tags.value.length==0){
        //alert("Todos los campos son obligatorios")
        document.form1.tags.focus()
        valida=0
    }
    
    if(opcion=="guardar")
        document.form1.opcion.value="guardar"
    else if(opcion=="publicar")
        document.form1.opcion.value="publicar"
        
    if(valida==1)
        document.form1.submit()
    else
        alert("Todos los campos son obligatorios")    
}    
</script>

parte formulario

Código PHP:

  <form id="form1" name="form1" method="post" action="insertarArticulo.php">
      <label> Título: 
      <input type="text" name="titulo" id="titulo" style="width:500px"/>
      </label><br />
      <label> Texto:
    
      <textarea name="texto" id="texto" cols="100" rows="5"  /></textarea>
    </label><br />
    ¿Publico?: 
    <label>NO<input type="radio" name="publico" id="publicoNo" value="NO" /></label>
    <label>SI<input type="radio" name="publico" id="publicoSi" value="SI" checked />
    </label><br />
    <label> Tags (separados por comas): 
      <input type="text" name="tags" id="tags" style="width:500px"/>
      </label><br />
    <input type="button" name="guardar" id="guardar" value="Guardar" onclick="javascript:validarForm('guardar')"/>
    <input type="button" name="publicar" id="publicar" value="Publicar" onclick="javascript:validarForm('publicar')"/>
    <input type="hidden" name="opcion" id="opcion"/>

    </form>

Alguna idea???

Mandete · #5 (**permalink**) 18/11/2008, 14:23

Después de buscar y buscar encontré la solución por casualidad

basta añadir la instruccion tinyMCE.triggerSave(); al principio de la funcion validarForm para que fije el valor del textarea :)

eupanor · #6 (**permalink**) 13/03/2009, 16:10

Buscaba otra cosa pero como veo que os falta la solución os la pongo. Si el campo del editor se llamase intro con esto evitais que esté vacío y que la longitud esté limitada antes de procesarlo:

if(tinyMCE.getContent('intro')== '' ){
alert('La descripcion es obligatoria');
tinyMCE.execCommand('mceFocus', false, 'intro');
return false;
}
var intro=tinyMCE.getContent('intro');
if(intro.length > 250 ){
alert('El texto de descripcion no puede ser mayor de 250 caracteres');
tinyMCE.execCommand('mceFocus', false, 'intro');
return false;
}

alexram1980 · #7 (**permalink**) 15/02/2011, 10:42

Cita:

Iniciado por eupanor

Buscaba otra cosa pero como veo que os falta la solución os la pongo. Si el campo del editor se llamase intro con esto evitais que esté vacío y que la longitud esté limitada antes de procesarlo:

if(tinyMCE.getContent('intro')== '' ){
alert('La descripcion es obligatoria');
tinyMCE.execCommand('mceFocus', false, 'intro');
return false;
}
var intro=tinyMCE.getContent('intro');
if(intro.length > 250 ){
alert('El texto de descripcion no puede ser mayor de 250 caracteres');
tinyMCE.execCommand('mceFocus', false, 'intro');
return false;
}

Excelente me funciono perfecto, muchas gracias