Custom Validator on NumericTextBox

4 posts, 0 answers
  1. Tim
    Tim avatar
    12 posts
    Member since:
    Nov 2012

    Posted 18 Sep 2014 Link to this post

    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."
            }
        });
    });


  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 19 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Tim
    Tim avatar
    12 posts
    Member since:
    Nov 2012

    Posted 22 Sep 2014 in reply to Georgi Krustev Link to this post

    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.
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 24 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready