1
votes

Validation personnalisée Knockout: Comment vérifier si observable est égal à une valeur spécifique?

Je suis nouveau avec Knockout.js, et je voudrais vérifier si un champ de mon formulaire a une valeur spécifique. En fait, je vérifie seulement si c'est nécessaire ou non. Que dois-je faire?

Voici ce que j'ai dans ma page html:

 var found = "found";
 window.Vm = ko.validatedObservable({
    name: ko.observable().extend({
       required: true,
       function: {
          if (this.val() == found)
             return true; // invalid value, can't submit my form
       }
    })
 });

Voilà à quoi ressemble mon fichier vm.js:

 window.Vm = ko.validatedObservable({
     name : ko.observable().extend({ required: true })
 });

Je ferais quelque chose comme ça, mais je ne sais pas comment le faire:

 <div data-bind="visible: !Vm.isValid()" class="text-danger">Fill each field to send data, otherwise show this message</div>

 <input data-bind="enable: Vm.isValid()" type="button" value="Send data!" />

javascript knockout.js knockout-validation

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser un validateur personnalisé comme celui-ci ( Documentation ):

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

<input type="text" data-bind="value: name" />

var found = "found";

var Vm = ko.validatedObservable({
  name: ko.observable().extend({
    required: {
      message: "This is a required field",
    },
    validation: {
      validator: (val, paramValue) => {
        // "val" has the value entered in the field
        // "paramValue" has the value set in "params"
        return val === paramValue
      },
      message: "The value is not " + found,
      params: found
    }
  })
});

ko.applyBindings(Vm)

0 commentaires

0
votes

Je recommanderais en fait de ne pas utiliser la bibliothèque Knockout Validation, car elle n'a pas été maintenue depuis des années. C'est une solution obsolète à un problème qui n'existe plus vraiment. En 2019, vous pouvez simplement utiliser la validation de formulaire native de tous les navigateurs modernes. Mettez simplement un attribut obligatoire dans les champs de votre formulaire et le formulaire ne sera pas soumis si tous les champs obligatoires n'ont pas été remplis.

Si vous voulez que ce soit un peu plus dynamique, vous pouvez faire quelque chose comme ceci:

<input type="text" data-bind="textInput: name, attr: { required: isRequired('name') }">

Et utilisez la liaison attr pour définir l'attribut required en fonction du tableau d'éléments requis dans votre modèle de vue.

function ViewModel() {
    var vm = this;

    vm.name = ko.observable();
    vm.required = ['name', 'email'];

    vm.isRequired = isRequired;

    function isRequired(field) {
        return vm.required.indexOf(field) > -1;
    }
}

0 commentaires

0
votes

J'ai pris des données comme ["A", "B"] et une recherche basée sur les mêmes données.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<p data-bind="css: { error: firstName.hasError }">
    <input data-bind='value: firstName, valueUpdate: "afterkeydown"' />
    <span data-bind='visible: firstName.hasError, text: firstName.validationMessage'> </span>
    <span data-bind='visible: (!firstName.hasError()), text: firstName.foundMessage'> </span>
</p>

ko.extenders.required = function(target, overrideMessage) {
    //add some sub-observables to our observable
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();
    target.data = ko.observableArray(["A","B"]);
 		target.found = ko.observable();
    target.foundMessage = ko.observable();
    //define a function to do validation
    function validate(newValue) {
       target.hasError(newValue ? false : true);
       target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
       target.found(target.data().find(function(element){ return newValue==element;}));
       target.found()?target.foundMessage("element has found"):target.foundMessage("element has not found");
    }
 
    //initial validation
    validate(target());
 
    //validate whenever the value changes
    target.subscribe(validate);
 
    //return the original observable
    return target;
};
 
function AppViewModel(first) {
    this.firstName = ko.observable(first).extend({ required: "" });
}
 
ko.applyBindings(new AppViewModel("C"));

0 commentaires