Your SlideShare is downloading. ×
Knockout validation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Knockout validation

4,541
views

Published on

Published in: Technology, Art & Photos

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,541
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JASON
  • 2. Knockout Validation  A KnockoutJS Plugin for model and property validation
  • 3. Native Rules  Required  ko.observable().extend({ required: true });  Min  ko.observable().extend({ min: 2 });  Max:  ko.observable().extend({ max: 99 });  MinLength  ko.observable().extend({ minLength: 3 });  MaxLength:  ko.observable().extend({ maxLength: 12 });  Pattern:  ko.observable().extend({ pattern: '^[a-z0-9].$' });
  • 4. Native Rules  Date  ko.observable().extend({ date: true });  Email:  ko.observable().extend({ email: true });  Equal:  ko.observable().extend({ equal: 2 });  Not Equal:  ko.observable().extend({ notEqual: 2 });  Number:  ko.observable().extend({ number: true });
  • 5. Use var viewModel = { phone: ko.observable().extend({ required: true }); submit: function () { if (viewModel.errors().length == 0) { alert('Thank you.'); } else { viewModel.errors.showAllMessages(); } } }; viewModel.errors = ko.validation.group(viewModel); ko.validation.configure(); ko.applyBindingsWithValidation(viewModel);
  • 6. Custom Validation Rules ko.validation.rules['mustEqual'] = { validator: function (val, otherVal) { return val === otherVal; }, message: 'The field must equal {0}' }; ko.validation.registerExtenders(); var myCustomObj = ko.observable().extend({ mustEqual: 5 });
  • 7. Custom Message Template <script id="customMessageTemplate" type="text/html"> <em class="customMessage" data-bind='validationMessage: field'></em> </script> <div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'> …… </div>
  • 8. Configuration Option Default insertMessages true decorateElement false errorMessageClass ‘validationMessage’ errorElementClass ‘validationElement’ errorsAsTitle true parseInputAttributes false errorClass null ko.validation.configure({ insertMessages: true, errorsAsTitle:true, errorElementClass: “errorClass", errorMessageClass: “errorMessageClass", decorateElement:true });

×