jueves, 10 de marzo de 2016

jquery.validation de un tinyMCE en un paso de jquery.steps

Sumario:

Tienes una página construida con plugin jquery.steps para asistentes (Wizards). Uno de los pasos es un texto HTML editado con tinyMCE. El elemento textarea que corresponde al este editor esta marcado como requerido para la validación mediante jquery.validation:
id= "CuerpoHTML" data-val="true" data-val-required="El campo Cuerpo de la noticia es obligatorio."
Sin embargo la validación no funciona: cuando dejas el texto vacio puedes pasar al siguiente paso.

Solución:

Tienes que hacer dos cosas cuando avanzas al siguiente paso del texto enriquecido.
  • Guardar el texto editado con tinyMCE.triggerSave()
  • Habilitar la validación de campos oculto
Para abreviar copio el código


        var stepTinyMCE = 1; // (manual pero puede automatizarse) Recordar que empieza en cero
        var form = $('form');
        form.children("div").steps({
            headerTag: "h2",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            onStepChanging: function (event, currentIndex, newIndex) {
                if (currentIndex > newIndex)
                {
                    return true
                }
                else if (currentIndex == stepTinyMCE)  //paso del tinyMCE
                {
                    form.validate().settings.ignore = "";
                    tinymce.triggerSave();
                    return $('#CuerpoHTML').valid();
                } else 
                {
                    form.validate().settings.ignore = ":disabled,:hidden";
                    return form.valid();
                }
            },
            onFinishing: function (event, currentIndex) {
                form.validate().settings.ignore = ":disabled";
                return form.valid();
            },
            onFinished: function (event, currentIndex) {
                alert("Submitted!");
            }
        });

No hay comentarios: