How to use custom validity on Kendo controls?

[Janko]

Using custom validity as below...

@(Html.Kendo()
                        .TextBoxFor(m => m.Task)
                        .Value(null)
                        .HtmlAttributes(new
                        {
                            required = "required",
                            oninvalid = "this.setCustomValidity('Enter a task')",
                            oninput = "this.setCustomValidity('')"
                        })
                        )

I've tried to do the same for other controls (numeric textbox, datetime picker, autocomplete) but it doesn't work.

For example, when trying the same thing for numeric textbox, in console I get an error "An invalid form control with name='Advance' is not focusable.

@(Html.Kendo()
                    .NumericTextBoxFor(m => m.Advance)
                    .Min(0).Max(1000)
                    .HtmlAttributes(new
                    {
                        id = "advance",
                        required = "required",
                        oninvalid = "this.setCustomValidity('Enter a number')",
                        oninput = "this.setCustomValidity('')",
                    })
                    )

[Mihaela]

Hello Janko,

By design, the NumericTextBox consists of two input elements - one visible and one hidden, which holds the value:

I have tested how the setCustomValidity attribute with the NumericTextBox, and I noticed that the "oninput" event handler activates, however, the tooltip with the error message does not show since the "oninvalid" attribute is added to the hidden input. When I make the second input visible, the tooltip is displayed:

Having this in mind, I would recommend using the Min() and Max() built-in options that will not allow the user to submit the NuemricTextBox editor with invalid value. Even the user does not enter a value, the editor will be submitted with its Min() value, for example "0".

 

Regards,
Mihaela
Progress Telerik

[Janko]

Min() and Max() are not the best solution because if max is 1000 and I try to input 1001 it won't notify me about that and it will set control value to 1000. Also, if I try to input a negative number, the field gets a red border that lasts 1/10 s.

So the only way to achieve custom validity is to copy HTML code and use custom validity on an input element that is originally hidden?

[Mihaela]

To notify the user that the entered number is not valid, I would suggest using a Tooltip. For example:

• Handle the "submit" event of the form and check the entered NumericTextBox value.
• Initialize a Tooltip if the value is not valid.

<form id="formExample" class="form-horizontal" method="post">
    <div class="form-group">
        @(Html.Label("Advance:"))
        <div class="col-sm-10">
            @(Html.Kendo()
                .NumericTextBoxFor(m => m.Advance)
                .HtmlAttributes(new
                {
                    id = "advance",
                    required = "required"
                })
                )
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Send</button>
        </div>
    </div>
</form>

<script>
    $(document).ready(function () { 
        $("#formExample").on("submit", function (e) {
            var advanceEditor = $("#advance").getKendoNumericTextBox(); //Get a reference to the NumericTextBox editor
            if(advanceEditor.value() < 1 || advanceEditor.value() > 1000) {
                e.preventDefault(); //prevent the form submission
                var tooltip = $(".k-numerictextbox").kendoTooltip({
                    filter: "input",
                    width: 150,
                    position: "bottom",
                    content: "Enter a number between 1 and 1000.",
                }).data("kendoTooltip");

                tooltip.show($(".k-numerictextbox"));
            }
        });
    })
</script>

Let me know if this approach works for you.