KnockoutJS: Valide la propriété du modèle uniquement si le contrôle lié est visible

J’ai model dans une page qui est liée à plusieurs contrôles. Selon certaines conditions, certains de ces contrôles seront visibles ou invisibles. Et lors de la soumission finale, je ne devrais valider que ceux qui sont visibles.

Voici un exemple de code pour expliquer mon besoin

 Age Required
Name :
Age:
var viewModel = { Name: ko.observable(), Age: ko.observable(),requireAge:ko.observable(false) }; ko.applyBindings(viewModel); function validateModel() { //validate visible properties and throw a common message that all visible fields should be filled }

Ma suggestion est d’utiliser la bibliothèque de validation de masquage (vous n’en avez pas fait mention dans votre question, donc je suppose que vous ne l’utilisez pas déjà). Elle est parfaitement intégrée à Knockout et rend la validation beaucoup plus pratique. Je l’ai beaucoup utilisé au cours de la dernière année et cela m’a beaucoup simplifié la vie. Il n’est pas nécessaire de créer des calculs pour savoir si un observable contient une valeur valide ou non. Vous pouvez trouver la bibliothèque de validation de knockout sur github .

Dans votre cas, vous pouvez simplement faire ce qui suit:

 var viewModel = function(){ var self = this; self.name = ko.observable(); self.requireAge = ko.observable(false); self.age = ko.observable().extend({ required: { onlyIf: function() { return self.requireAge(); } } }); }; 

Les messages d’erreur de validation sont automatiquement insérés sous l’élément auquel l’observable est lié. Vous pouvez également créer vos propres règles de validation, mais beaucoup d’entre elles fonctionnent directement, y compris celle présentée ci-dessus. Vous pouvez même utiliser certains atsortingbuts de données pour certaines règles. C’est probablement la meilleure façon de procéder à la validation en conjonction avec KO.

Selon certaines conditions, certains de ces contrôles seront visibles ou invisibles.

Il serait préférable que ces conditions soient contenues dans le modèle. Et méthode de validation aussi.

Voir extrait:

 var viewModel = function() { this.Name = ko.observable(""); this.Age = ko.observable(""); this.requireAge = ko.observable(false); this.isValid = ko.computed(function() { if (ko.unwrap(this.Name).length === 0) return false; if (ko.unwrap(this.requireAge) && ko.unwrap(this.Age).length === 0) return false; return true; }, this); }; window.onload = function() { ko.applyBindings(new viewModel()); }; 
  Age Required
Name :
Age:
is valid: