Validación de eliminación y QTIP

Question

Actualmente utilizo la validación de jQuery y QTIP juntos para tratar la validación y la visualización de información real en la pantalla utilizando las Notificaciones de estilo de información de herramientas Nice en los errores de validación utilizando el componente de plazo de error de las opciones de validación.

Actualmente, cada ViewModel tiene su propio método personalizado para configurar y iniciar la validación y las devoluciones de llamada, sin embargo, estaba tratando de ver una forma más agradable de hacer esto, ya sea agregando un enlace personalizado para configurar mis reglas de validación a través de los vínculos de datos o Una forma alternativa, pero aún así producir los mismos resultados (es decir, el error de error se activa cuando ocurre un error de validación y le dice a QTIP que muestre el error para el elemento dado).

Ahora, antes de comenzar a hacer uno yo mismo, acabo de comprobar en línea y encontré Validación de eliminación, que inicialmente pensé que era una gran idea, podría aplicar mi lógica de validación directamente a los datos dentro de mi modelado ViewModel y luego encontrar algún tipo de devolución de llamada para que QTIP se active, sin embargo, parece que no hay una devolución de llamada que pueda encontrar documentada . La biblioteca parece hacer todo lo que quiero para el lado de la validación de las cosas, pero no para el lado de exhibición de las cosas. Miré a través del código fuente y los ejemplos, pero no pude ver nada más que ko.validation.group (ViewModel) que me daría un observable que contiene los errores, pero no estoy seguro si podría usar esto de la misma manera que yo era esperando.

Aquí hay un ejemplo de cómo ocurre mi validación actual:

/*globals $ ko */
function SomeViewModel() {

    this.SetupValidation = function () {
        var formValidationOptions = {
            submitHandler: self.DoSomethingWhenValid,
            success: $.noop,
            errorPlacement: function (error, element) {
                if (!error.is(':empty'))
                { qtip.DoSomethingToDisplayValidationErrorForElement(element, error); }
                else
                { qtip.DoSomethingToHideValidationErrorForElement(element); }
            }
        };

        $(someForm).validate(formValidationOptions);
        this.SetupValidationRules();
    };

    this.SetupValidationRules = function() {
        $(someFormElement1).rules("add", { required: true, minlength: 6, maxlength: 20, alphaNumeric: true });
        $(someFormElement2).rules("add", { required: true, minlength: 6, maxlength: 20 });
        $(someFormElement3).rules("add", { required: true, email: true, });
    };
}

Actualmente estoy seguro de que puedo eliminar la necesidad del método de reglas de validación agregando un enlace personalizado para que pueda establecer la validación en el unión de datos, sin embargo, si es posible, me gustaría usar el mismo tipo de enfoque de devolución de llamada con el knockout existente- Validación vinculante.

Answer 1

No he usado la validación de Knockout específicamente, pero he escrito algo similar en el pasado. Una rápida mirada a la fuente muestra que cada observable extendido obtiene un subobservable es válida. Esto podría usarse para ocultar mensajes de programación en su marcado utilizando enlaces visibles convencionales.

Para lograr que QTIP funcione, un enlace personalizado podría suscribirse a esta propiedad ISVALID y realizar la inicialización necesaria para mostrar/ocultar QTIP cuando se activa.

EDITAR

Aquí hay un ejemplo para comenzar

http://jsfiddle.net/madcapnmckay/hfcj7/

HTML:

<!-- Note that you have to reference the "qtipValMessage" binding -->
<!-- using the "value" binding alone is not enough                -->
<input data-bind="value: emailAddress, qtipValMessage : emailAddress" />

JS:

ko.bindingHandlers.qtipValMessage = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var observable = valueAccessor(), $element = $(element);
       if (observable.isValid) {
            observable.isValid.subscribe(function(valid) {
                if (!valid) {
                    $element.qtip({
                        overwrite: true,
                        content: {
                            text: observable.error
                        }
                     });
                 } else {
                     $element.qtip("destroy");
                 }
           });
       }
    }
};

Answer 2

Había estado editando la publicación de Madcapnmckay, pero las diferencias se han vuelto lo suficientemente significativas como para que creo que se necesita una nueva respuesta.

Se basa en gran medida en la publicación de Madcapnmckay, pero soluciona un error señalado por Morgantiley. El original solo funciona si el usuario ha modificado lo observable. Si no lo han hecho, el código nunca se despide. Por lo tanto, lo modificé para que dispare el código de información sobre herramientas cuando se crea, además de cuando cambia.

ko.bindingHandlers.qtipValMessage = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var observable = valueAccessor(), $element = $(element);
        if (observable.isValid) {
            var updateTooltip = function (valid) {
                if (!valid) {
                    $element.qtip({
                        overwrite: true,
                        content: {
                            text: observable.error
                        }
                    });
                } else {
                    $element.qtip("destroy");
                }
            }
            updateTooltip();
            observable.isValid.subscribe(updateTooltip);
        }
    }
};

El único inconveniente es que la información sobre herramientas se mostrará en el flotador antes de que se haya ejecutado la validación de nocaut (por ejemplo, tiene una validación "requerida" en un campo, antes de presionar enviar una información sobre herramientas que se mostrará diciendo que el campo es necesario, pero el campo no destacado en rosa). Sin embargo, una vez que cambie el campo, la información sobre herramientas desaparecerá si el campo es válido.

Mi aplicación no estaba usando QTIP, sino de Twitter Bootstrap ToolTip, así que aquí también está el código para eso.

ko.bindingHandlers.invalidTooltip = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var observable = valueAccessor(), $element = $(element);
        if (observable.isValid) {
            var updateTooltip = function (valid) {
                if (!valid) {
                    $element.attr("data-original-title", observable.error);
                    $element.tooltip();

                } else {
                    $element.tooltip("destroy");
                }
            }
            updateTooltip();
            observable.isValid.subscribe(updateTooltip);
        }
    }
};