Knockout + Jquery Valider

Question

J'essaie de configurer la validation avec jquery validate, et j'ai le viewmodel qui revient du serveur, mappé au client et qui a réussi à lier certaines données.

J'ai inclus un appelé pour valider mais la validation ne se déclenche jamais, cependant si je mets une classe sur la boîte d'entrée, puis appel valide, il se déclenche comme prévu.

Des idées?

<script type="text/javascript"> 
     var viewModel; 
     $(document).ready(function() { 
      $.ajax({ 
       url: 'Home/GetUserData', 
       type: 'post', 
       success: function (data) { 
        viewModel = ko.mapping.fromJS(data); 
        viewModel.save = function() { sendToServer(); }; 
        ko.applyBindings(viewModel); 
        main(); 
       } 
      }); 
     }); 

     function main() { 
      $("form").validate({ 
       rules: { 
        birthPlace: { 
         required: true, 
         minlength: 2 
        } 
       } 
      }); 
     } 

     function sendToServer() { 
      alert($("form").valid()); 
     } 

    </script> 
} 
<h2>@ViewBag.Message</h2> 
<form id="nameSubmit" action=""> 
    <div> 
     The name is: <span id="test" data-bind="text: Name"></span> 
    </div> 
    <div> 
     He's <span id="age" data-bind="text: Age"></span> 
    </div> 
    <div> 
     He's from 
     <input type="text" id="birthPlace" name="birthPlace"/> 
    </div> 
    <div> 
     <button data-bind="click: save">Click Me</button> 
    </div> 
</form> 

Answer 1

Par défaut, jQuery Validate valide la validation. Donc, si knockout interrompt cela, c'est-à-dire en ne provoquant pas réellement l'événement onSubmit, cela le ferait. Votre meilleur pari peut être de faire ce que vous aviez prévu un peu là, dans votre fonction sendToServer - déclencher manuellement la validation de votre événement soumettre knockout:

if (!$('form').valid()){ 
    $('form').showErrors(); 
    return false; 
} 

//otherwise, get on with whatever knockout needs to do 
... 
return true; 

Answer 2

J'utilise l'option submitHandler sur validate():

Sur le formulaire, utilisez simplement un <input type="submit"> standard et la validation jQuery ramassera l'événement, validera et, s'il est valide, appellera votre gestionnaire sur viewModel.

Answer 3

Il y a maintenant un knock-out jQuery valider la liaison, que je trouve très utile:

https://github.com/Knockout-Contrib/Knockout-Validation

Answer 4

Je voudrais recommander contre l'utilisation de jQuery valider avec élimination directe. La raison en est que jQuery validate se lie au DOM, tandis que knockout recommande de travailler avec le modèle de vue. Cela entraînera des problèmes une fois que vous aurez commencé à ajouter plus de dépendances à la validation, par exemple en empêchant certains comportements si les données ne sont pas valides, mais vous devrez quand même conserver les données. Aller pour knockout validation, il fait très bien le travail.

Answer 5

Il est correct que jQuery Validation effectue uniquement sa validation sur l'événement de soumission de formulaire (selon la réponse de Ryley). Donc si vous utilisez le style Knockout data-bind="click:modelSubmit" cela empêchera le formulaire de se déclencher (par défaut) et empêchera ainsi jQuery Validation de faire quoi que ce soit.

Vous avez deux options. Le premier est de retourner true de modelSubmit(), ce qui fera Knockout feu le formulaire soumettre (mais seulement aprèsmodelSubmit est terminée) (http://knockoutjs.com/documentation/click-binding.html).

La seconde - et probablement ce que vous voulez - est d'abandonner complètement data-bind="click" et d'utiliser à la place un gestionnaire de soumission jQuery Validation (https://jqueryvalidation.org/validate).

$("#myform").validate({ 
    submitHandler: function(form) { 
     viewModel.modelSubmit(); 
    } 
}); 

Ce gestionnaire n'est appelé qu'une fois la validation réussie.