URL Validation with KnockoutJS
16 Jul 2014I recently found myself having to implement URL validation in KnockoutJS. Here’s how I went about doing that:
1) Add Knockout-Validation plugin to your project.
2) Create a custom rule to validate URLs based on the RegEx by Diego Perini found here:
ko.validation.rules['url'] = {
validator: function(val, required) {
if (!val) {
return !required
}
val = val.replace(/^\s+|\s+$/, ''); //Strip whitespace
//Regex by Diego Perini from: http://mathiasbynens.be/demo/url-regex
return val.match(/^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/i);
},
message: 'This field has to be a valid URL'
};
ko.validation.registerExtenders();
3) You are all set. You can now use it either one of these ways:
JS:
jsvar someURL = ko.observable().extend({ url: true });
HTML:
html<input type="text" data-bind="value: someURL.extend({ url: true })" />