Knockout and jQuery Validate

1,637 views
Skip to first unread message

Jumpa

unread,
Dec 21, 2012, 3:51:25 PM12/21/12
to knock...@googlegroups.com
Hi there, 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:9000/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 if: 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?

Stacey

unread,
Dec 21, 2012, 8:14:44 PM12/21/12
to knock...@googlegroups.com
I doubt this will help you. I know nothing of jQuery Validation - but I do remember having to do this when I first started using KO. I had to add this script to my site.

(function ($) {
$.fn.submitHandler = function (callback) {
this.each(function (i) {
var container = $(this);
// attach the jquery unobtrusive validator
$.validator.unobtrusive.parse(container);
// bind the submit handler to unobtrusive validation.
$(container).data("validator").settings.submitHandler = function () {
callback(container);
};
});
return this;
};
})(jQuery);

Jumpa

unread,
Dec 22, 2012, 4:49:14 AM12/22/12
to knock...@googlegroups.com
Fiddle here: http://jsfiddle.net/wn2qU/

Jumpa

unread,
Dec 22, 2012, 5:20:28 AM12/22/12
to knock...@googlegroups.com
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 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 -->

Ben Jensen

unread,
Dec 28, 2012, 3:25:38 PM12/28/12
to knock...@googlegroups.com
FYI, theres a binding for that.

Reply all
Reply to author
Forward
0 new messages