web-dev-qa-db-fra.com

Validation de KO

J'ai le projet asp.net mvc3 où je fais une édition en bloc sur une table avec une liaison knock-out. Je souhaite effectuer des validations telles que les validations requises et les validations numériques tout en sauvegardant les données. Y at-il un moyen plus facile de faire des validations inactives. PS: je n'utilise pas de formulaires.

knockout.jsvalidationknockout-validation
45
Kurkula

Jetez un oeil à Knockout-Validation qui configure et utilise proprement ce qui est décrit dans le documentation de knockout . Sous: Live Exemple 1: Forçage de l'entrée numérique

Vous pouvez le voir vivre dans Fiddle

[~ # ~] update [~ # ~] : le violon a été mis à jour pour utiliser les dernières versions de KO 2.0.3 et ko.validation 1.0.2. en utilisant les urls cloudfare CDN

Pour configurer ko.validation:

ko.validation.rules.pattern.message = 'Invalid.';

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

Pour configurer les règles de validation, utilisez des extensions. Par exemple:

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.' }
    })
};
83
Cohen

Si vous ne souhaitez pas utiliser la bibliothèque KnockoutValidation, vous pouvez écrire la vôtre. Voici un exemple de champ obligatoire.

Ajoutez une classe javascript avec toutes vos extensions ou extensions KO et ajoutez les éléments suivants:

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;
};

Ensuite, dans votre vue, le modèle vous permet de vous observer:

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

Il existe un certain nombre d'exemples en ligne pour ce style de validation.

5
ChrisW