KnockoutJS check if on textbox is greater than another textbox

Question

I am new to KnockoutJS and I am having some trouble with validation. I have two textboxes and I am trying to validate to ensure that textbox1 input value is greater than textbox2 input value.

<input type="number" id="tbLow" name="tbLow" data-bind="value: model.tbLow"/>
<input type="number" id="tbHigh" name="tbHigh" data-bind="value: model.tbHigh"/>

this isthe validation for tbLow:

self.model.tbLow.extend({
    min: 1,
    max: 999999,
    maxLength: 6,
    validation: { validator: greaterThan, 
                  message: 'tbHigh must be larger than Car tbLow.', 
                  params: tbHigh }

});

here is the validation function:

var greaterThan = function (tbLow, tbHigh ) {
    return CarNumberHigh > CarNumberLow;
}

I am not able to get the value for tbHigh... Any ideas??

Have you used the getter function somewhere that I am missing? tgHigh() — PW Kad, Aug 16 '13 at 14:59
what getter function? - the other validations are working well (min, maxlength etc.) — Dashsa, Aug 16 '13 at 15:01
If you need to 'get' the value of tbHigh and it is an observable, when you reference it in your view model you need to use the getter function tbHigh(). I don't use the validation plugin that much but try changing your params to params: tbHigh() — PW Kad, Aug 16 '13 at 15:02
so i should change the validation function? validation: { validator: greaterThan, message: 'Car Number High must be larger than Car Number Low.', params: tbHigh() } is throwing an error : TypeError: CarNumberHigh is not a function — Dashsa, Aug 16 '13 at 15:14
Have you tried debugging and seeing the values being passed into your greaterThan function? Most likely you just need to execute you tbHigh observable — Thewads, Aug 16 '13 at 15:14
yeah, when I debug in firebug there is no value for tbHigh... there is the correct value for tbLow how do I execute tbHigh observable — Dashsa, Aug 16 '13 at 15:15
has tbHigh been declared? or have you declared tbLow with the extend before it? — Thewads, Aug 16 '13 at 15:16
both have been declared: self.model.tbLow.extend({ min: 1, max: 999999, maxLength: 6, //areSame: { params: selfCarNumberHigh, message: "testMessage" } validation: { validator: greaterThan, message: 'Car Number High must be larger than Car Number Low.', params: tbHigh() } }); self.model.tbHigh.extend({ min: 1, max: 999999, maxLength: 12, }); — Dashsa, Aug 16 '13 at 15:19
For reference it is not executing the observable, it's utilizing the getter function. — PW Kad, Aug 16 '13 at 15:19
sounds like @PWKad is correct. Try in your greaterThan to get the value from tbHigh by using tbHigh() — Thewads, Aug 16 '13 at 15:20
As mentioned above, when I change the function var greaterThan = function (tbLow, tbHigh) { return tbHigh() > tbLow; } I get the following error: TypeError: CarNumberHigh is not a function — Dashsa, Aug 16 '13 at 15:25
ok, getting confused a little, would you be able to get a jsfiddle of this running for me to have a look at? not sure what you are trying to achieve with using tbHigh, and then this CarNumberHigh variable — Thewads, Aug 16 '13 at 15:27
Your error is from your function. You're not using the parameters you're passing in: var greaterThan = function (tbLow, tbHigh ) { return tbHigh > tbLow; } — Tombala, Aug 16 '13 at 16:36

score 0 · Answer 1 · answered Aug 16 '13 at 16:25

An extender wraps an observable. Are you setting the value of model.tbLow to the result of the observable.extend() function?

Your code should look like this:

self.model.tbLow = self.model.tbLow.extend({ ... });

Or if you extend it from within your model...

this.tbLow = ko.observable(...).extend({ ... });

Did you write that validation extender yourself or are you using something you found? Can you post or link to the code for that? Otherwise we don't know if you're using it properly, we can't know what the 'greaterThan' function is being sent.

KnockoutJS check if on textbox is greater than another textbox

1 Answers1