Knockout Validation Need the Element

Question

I want to pass an entire element into my validation.

Element:

<input id="txtPhoneNumber" data-bind="value: Phone, intlTelInput: Phone" name="phone" type="text" class="form-control">

JS KO:

            ko.validation.rules['validPhone'] = {
              validator: function (val) {
                return val.intlTelInput('isValidNumber');
              },
              message: 'Invalid Phone Number'
            }

The problem I have is I don't want to rewrite intlTelInput which takes a element not just a straight value. Any suggestions?

Answer 1

I don't approve in passing element to knockout validations but if you would really like to do that then you can make a custom binding that would pass the observable to be validated then from that custom binding you can already extend the observable to a validator and pass the element to it.

1.. Make the validator

`ko.validation.rules['validPhone'] = {
    validator: function (val, element) {
        //do what you want with the element here
        return val.intlTelInput('isValidNumber');
    },
    message: 'Invalid Phone Number'
}`

2.. Make the custom binding

ko.bindingHandlers.validPhone = {
    init: function(element, valueAccessor){
        var observable = valueAccessor();
        observable.extend({validPhone: element}) 
    }
}

3.. Element should be defined like this

<input id="txtPhoneNumber" data-bind="value: Phone, validPhone: Phone, intlTelInput: Phone" name="phone" type="text" class="form-control" >