knockout.js - Validación Knockout

ko observable() extend

Question

Tengo el proyecto asp.net mvc3 donde hago una edición masiva en una tabla con un enlace directo. Quiero hacer validaciones como validaciones requeridas y de números mientras guardo datos. ¿Hay alguna manera más fácil de hacer validaciones de eliminación? PD: No estoy usando formularios.

Answer 1

Eche un vistazo a Knockout-Validation que limpia y configura lo que se describe en la documentación de knockout . Debajo: Ejemplo en vivo 1: forzar la entrada para que sea numérica

Puedes verlo en vivo en Fiddle

ACTUALIZACIÓN : el violín se ha actualizado para utilizar el último KO 2.0.3 y ko.validation 1.0.2 utilizando las URL CDN de Cloudfare

Para configurar ko.validation:

ko.validation.rules.pattern.message = ''Invalid.'';
ko.validation.configure({
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null
});

Para configurar las reglas de validación, use los extensores. Por ejemplo:

var viewModel = {
firstName: ko.observable().extend({ minLength: 2, maxLength: 10 }),
lastName: ko.observable().extend({ required: true }),
emailAddress: ko.observable().extend({ // custom message
required: { message: ''Please supply your email address.'' }
})
};

Answer 2

La validación de Knockout.js es útil pero no es robusta. Siempre debe crear una réplica de validación del lado del servidor. En su caso (al usar knockout.js) está enviando datos JSON al servidor y de vuelta de forma asincrónica, de modo que puede hacer que el usuario piense que ve la validación del lado del cliente, pero de hecho sería una validación asíncrona del lado del servidor.

Mire el ejemplo aquí upida.cloudapp.net:8080/org.upida.example.knockout/order/create?clientId=1 Este es un enlace de "Crear orden". Intenta hacer clic en "guardar" y jugar con los productos. Este ejemplo se hace usando la biblioteca upida (hay versión Spring mvc y asp.net mvc de esta biblioteca) de codeplex.

Answer 3

Si no desea usar la biblioteca KnockoutValidation, puede escribir la suya propia. Aquí hay un ejemplo para un campo Obligatorio.

Agregue una clase de JavaScript con todas las extensiones KO o extensores, y agregue lo siguiente:

ko.extenders.required = function (target, overrideMessage) {
//add some sub-observables to our observable
target.hasError = ko.observable();
target.validationMessage = ko.observable();
//define a function to do validation
function validate(newValue) {
target.hasError(newValue ? false : true);
target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
}
//initial validation
validate(target());
//validate whenever the value changes
target.subscribe(validate);
//return the original observable
return target;
};

Luego, en su viewModel extiéndase observable por:

self.dateOfPayment: ko.observable().extend({ required: "" }),

Hay varios ejemplos en línea para este estilo de validación.