2011-04-20 36 views
19

Estoy tratando de configurar la validación con jquery validate, y tengo el modelo de vista regresando del servidor, asignado al cliente y con éxito noqueando js vinculando algunos datos.Knockout + Jquery Validate

Incluí una llamada para validar, pero la validación nunca se desencadena, sin embargo, si pongo una clase en el cuadro de entrada y luego una llamada válida, se desencadena como se esperaba.

¿Alguna idea?

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

Respuesta

24

Por defecto, jQuery Validate hace su validación en el envío. Entonces, si el knockout lo está interrumpiendo, es decir, al no activar el evento onSubmit, eso lo haría. Su mejor opción puede ser la de hacer lo que estábamos algo planeando allí en su función sendToServer - manualmente desencadenar la validación de su nocaut presentar evento:

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

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

Pero onkeyup, focus etc no se activa tampoco en mi ejemplo. – RubbleFord

+0

Validar no hace nada onkeyup, foco o cualquier otro evento hasta la primera presentación del formulario. Después de eso, todos esos eventos se desencadenan para cada campo inválido hasta que se solucionen. – Ryley

+0

Eso podría ser, voy a echar un vistazo. – RubbleFord

2

He estado usando la opción submitHandler en validate():

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

En el formulario, solo use un estándar <input type="submit"> y la validación de jQuery recogerá el evento, lo validará y, si es válido, llamará a su controlador en viewModel.

10

me gustaría recomendar contra el uso de jQuery validar con nocaut. La razón es que jQuery valida binds al DOM, mientras que knockout recomienda trabajar con el modelo de vista. Esto generará problemas una vez que comience a agregar más dependencias a la validación, como evitar cierto comportamiento si los datos no son válidos, pero aún necesita retener los datos. Vaya por knockout validation, hace el trabajo muy bien.

1

Es correcto que jQuery Validation solo haga su validación en el evento de envío del formulario (según la respuesta de Ryley). Así que si usa Knockout style data-bind="click:modelSubmit" esto evitará que el formulario se envíe desde el momento de la activación (de forma predeterminada) y así evitará que jQuery Validation haga algo.

Tiene dos opciones. El primero es devolver true de modelSubmit(), que hará que Knockout desencadene el envío del formulario (pero solo después demodelSubmit ha finalizado) (http://knockoutjs.com/documentation/click-binding.html).

El segundo - y lo más probable es que lo que desee - es dejar data-bind="click" en total y usar un manejador de envío jQuery Validation en su lugar (https://jqueryvalidation.org/validate).

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

Este manejador solo recibe una llamada una vez que la validación ha tenido éxito.

Cuestiones relacionadas