2012-01-05 32 views
9

Necesito validar un formulario. Este formulario tiene algunas listas desplegables y editor tinyMCE, estoy validando este formulario agregando la cadena "Requerido" después de cada campo si está en blanco. Sin embargo, no puedo validar el editor de tinyMCE, si el editor está en blanco, intenté algo como¿Cómo puedo validar un editor tinyMCE, si está en blanco al agregar una cadena al lado?

tinyMCE.get('tinyedotor').getContent(); 

pero no hubo suerte.

aquí es mi fiddle

Respuesta

12

getContent() debería funcionar bien. Su violín no contiene el código de validación de formulario para el valor del editor, que es bastante crucial aquí. Prueba esto:

var editorContent = tinyMCE.get('tinyeditor').getContent(); 
if (editorContent == '') 
{ 
    // Editor empty 
} 
else 
{ 
    // Editor contains a value 
} 

Forked fiddle

También tenga en cuenta que ha declarado en múltiples id 's para su select desplegable.

Editar: Puede obtener el id del contenedor editor con el método getContainer(): tinyMCE.get('tinyeditor').getContainer(). Insertando un mensaje de error después de que el editor de entonces sería algo como esto:

$('<span class="error">Editor empty</span>').insertAfter($(tinyMCE.get('tinyeditor').getContainer())); 

Esto, sin embargo, va a crear un nuevo span cada vez que el usuario hace clic en el botón de envío, por lo que probablemente querrá tener un mensaje de error contenedor con un único id y compruebe si el contenedor ya existe antes de insertarlo.

Editar 2: Updated fiddle.

+0

@Victor: Genial, puedo hacerlo pero mi problema es poner esta cadena al lado de tinyMCE. No sé cómo obtengo la clase/id de tinymCe, así que podría hacer algo como $ (". Errormrssage"). AppendTo ('class/id of tinyMCEEditor'); – Mike

+0

@Mike: ver el código agregado. – Viktor

+0

@Victor: Agregué este código pero parece que se necesita algo más para eliminar el mensaje. Aquí está violín http://jsfiddle.net/bvNMc/13/ – Mike

0

getContent() es el camino a seguir. Simplemente puede usar el objeto tinyMCE.activeEditor y llamar al getContent() en eso u obtener la instancia del editor por identificación, como lo está haciendo.

Parece que tiene un error tipográfico en su identificación, que probablemente esté causando su problema.

tinyMCE.get('tinyedotor').getContent(); 

probablemente debería ser:

tinyMCE.get('tinyeditor').getContent(); 
+0

era solo un error tipográfico aquí en cuestión, pero mi código es correcto, ¿oíste el violín – Mike

+0

Sí, no vi ninguna llamada 'getContent', solo una invocación' setContent'. ¿Estoy mirando el código correcto? Además, actualmente arroja un error: 'Uncaught SyntaxError: Inesperado identificador' – buley

1

Lo que quiere se puede hacer fácilmente. Ella es una link to a fiddle con mi solución.

+0

El mensaje del editor vacío debe estar en línea con la línea superior del editor de tinyMCE, ahora mismo está en el centro. Puedo usar la posición absoluta y usar las dimensiones superior e izquierda, pero eso molestará, ya que mi página tiene 3 editores de tinymce y solo una se muestra en función de alguna lógica. ¿Podemos tener este mensaje de editor en la primera línea en alineación con el cuadro tinyMCE? – Mike

+0

@Mike: Alinee el contenido de la celda de la tabla para la celda de la tabla que contiene el mensaje de error: ''. – Viktor

+0

@Viktor: pero tengo un diseño div. – Mike

7

Usted puede hacer esto para comprobar si el contenido está vacío y sin análisis de HTML:

var content = tinymce.get('tinymceEditor').getContent({format: 'text'}); 
if($.trim(content) == '') 
{ 
    // editor is empty ... 
} 
+0

Muy útil, porque si hay algunos espacios en blanco, en formato html ya no cuenta como vacío. – Memochipan

+0

Será más útil cuando elimine el filtrado de formato '{format: 'text'}', ya que en algún momento el usuario no escribe nada más que insertar el archivo/imagen. –

1

Utilizando el getContent() es la forma correcta, pero lo que si el usuario entra en el espacio !! ??
Aquí es la solución completa con la expresión regular -

var content = tinyMCE.get('tinyeditor').getContent(), patt; 

      //Here goes the RegEx 
      patt = /^<p>(&nbsp;\s)+(&nbsp;)+<\/p>$/g; 

      if (content == '' || patt.test(content)) { 
       $('.bgcolor').css("border", "1px solid Red") 
       return false; 
      } 
      else { 
       $('.bgcolor').removeAttr("style") 
       return true; 
      } 

Nota: ('.bgcolor') no es más que un div alrededor de la 'tinyeditor' tener el borde rojo cuando se produce la validación.

Cuestiones relacionadas