Knockout and jQuery Validate

问题

I've some problems getting KO and jQuery Validate plugin work together.

My model:

Parameter {
    int Id;
    string Name;
    decimal Price;
}

And my HTML+JS:

<DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta>
        <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
        <script type='text/javascript' src='js/jquery.validate.min.js'></script>
        <script type='text/javascript' src='js/knockout-2.2.0.js'></script>
        <script type='text/javascript' src='js/knockout.mapping-latest.js'></script>
    </head>
    <script type="text/javascript">
        function AdminViewModel() {

                var self = this;
                self.parameters = ko.observableArray();

                self.getParameters = function() {
                    // gets all parameters for the element with specified id (1)
                    $.getJSON('http://localhost:81/api/parameters/1', function(parameters){
                    ko.mapping.fromJS(parameters, {}, self.parameters);
                });
            }

            self.save = function() {
                alert('Submit!');
            }
        }

        jQuery(function( $ ) {

            var viewModel = new AdminViewModel();

            ko.applyBindings(viewModel);

            viewModel.getParameters();

            $("#form-settings").validate({ submitHandler: viewModel.save });
        });
    </script>
    <body>
        <form id="form-settings" action="javascript:void(0);">
            <!-- ko foreach: parameters() -->
            <!--<p data-bind="foreach: parameters()">-->
                Parameter <input class="required" type="text" data-bind="value: $data.Name" /><br />
                Price <input class="required number" type="text" data-bind="value: $data.Price" /><br />
            <!--</p>-->
            <!-- /ko -->
            <button type="submit">Save</button>
        </form>
    </body>
</html>

Validation is not working properly, sometimes form is submitted and page reloaded also if there are errors, sometimes error messages are displayed only for one input, what's wrong with my code?

回答1:

For a much cleaner solution and better decoupling between model and view check out the KO validation library

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

edit: To use it with mapping plugin do,

MyViewModel = function(data) {
   this.required = ko.observable().extend({ required: true});
   ko.mapping.fromJS(data, {}, this);
};

You should always use explicit declared viewmodels, declare the important members on the model (The ones that are used from business logic) the read only fields thats only used for presentation can be declared by the mapping plugin, this way your code gets much easier to understand and maintain.

回答2:

For anyone interested. I was not defining html "name" property for input. Inside the foreach, you need to define a unique and not variable name, 'cause jQuery uses it to attach the error label.

<!-- ko if: parameters() -->
    <p data-bind="foreach: parameters()">
        Parameter <input class="required" name="" type="text" data-bind="value: $data.Name, attr: { name: 'parameter_' + $index() }" /><br />
        Price <input class="required number" name="" type="text" data-bind="value:     $data.Price, attr: { name: 'price_' + $index() }" /><br />
    </p>
<!-- /ko -->

来源：https://stackoverflow.com/questions/13999371/knockout-and-jquery-validate

标签

knockout.js

jquery-validate

knockout-mapping-plugin

knockout-2.0