Custom Validator on NumericTextBox

[Tim]

I'm trying to get custom validation working on a NumericTextBox. I've read the article on custom validation, but I can figure out to get the validator to validate the textbox.  This is a read only textbox that gets set by several other functions. I'm trying to check if it's greater than 0. 

@(Html.Kendo().NumericTextBox<decimal>().HtmlAttributes(new { style = "width: 80px"})
                 .Name("totalLTDandLife")
                 .Format("c2")
                 .Spinners(false)
               )


$(function () {
    $("form").kendoValidator({
        rules: {
            selectCoverage: function (input) {
                if (input.is("[name=totalLTDandLife]")) {
                    return input.val() > 0;
                }
                return true;
            }
        },
        messages: {
            selectCoverage: "Please select either LTD coverage or Term Life coverage."
        }
    });
});

[Georgi Krustev]

Hello Tim,

I would suggest you check this Validation help topic, which explains how to validate widgets using Kendo UI Validator. Let me know if the problem still persists.

Regards,
Georgi Krustev
Telerik

 

 

[Tim]

I've written the custom validator, but I"m having trouble getting the validator validate the field. The validator isn't processing the field. I think this is because it doesn't have the attribute data-val=true set on a readonly field.

<input id="totalLTDandLife" name="totalLTDandLife" style="display: none;" type="text" value="0" data-role="numerictextbox" role="spinbutton" class="k-input valid" aria-valuenow="0" aria-disabled="false" aria-readonly="true" readonly="readonly">

How do I add the data-val=true attribute?

Thanks for your help.

[Daniel]

Hello Tim,

The data-val attribute is not used by the Kendo Validator. The input will not be validated because it is readonly. readonly and disabled inputs should not be validated and so the validator will ignore them. If you need to validate the readonly input then I can suggest to explicitly call the validateInput method. This will also have to be done in the form submit event since the validator will not prevent the event in this scenario:

$(function () {
    $("form").kendoValidator({
        rules: {
            selectCoverage: function (input) {
                if (input.is("[name=totalLTDandLife]")) {
                    return input.val() > 0;
                }
                return true;
            }
        },
        messages: {
            selectCoverage: "Please select either LTD coverage or Term Life coverage."
        }
    }).on("submit", function (e) {
        var validator = $(this).data("kendoValidator");

        if (!validator.validateInput($("#totalLTDandLife"))) {
            e.preventDefault();
        }
    });
});

Regards,
Daniel
Telerik