Validation Message Bubble

[Wolfgang Weilguny]

Hello,

is there any way to display a Validation-Message Bubble like in a grid Editor in a TextBox?
I.e. I have this code:

Model:

public class Promotion
{
    [StringLength(10]
    [RegularExpression("^\\$?[A-Z0-9]+$")]
    [Required()]
    public String Code { get; set; }

    ....
}

View:

@using (Html.BeginForm())
{
<div>
    @(Html.LabelFor(model => model.Promotion.Code))
    @(Html.Kendo().TextBoxFor(model => model.Promotion.Code))
</div>
}

If, for example, I leave it empty or enter lowercase letters into this TextBox, I would like it to show a Validation-Error-Bubble just like in a Grid Editor.

Thank you

 

[Aleksandar]

Hello Wolfgang,

As of Kendo UI 2020 R2 we have reworked the Kendo Validator with improved styling for messages, which differ significantly from the styling available prior to this release. This change is documented in the breaking changes section here. While not recommended, reverting to the previous behavior is possible by tweaking the errorTemplate of the Validator and the styles applied.

For example, in the Validator Demo you can specify the errorTemplate of the Validator for the form, as specified in the article cited above:

var validator = $("#ticketsForm").kendoValidator({
        errorTemplate: '' +
        '<span class="k-tooltip k-tooltip-error k-validator-tooltip">' +
            '<span class="k-tooltip-icon k-icon k-i-warning"></span>' +
            '<span class="k-tooltip-content">#= message #</span>' +
        '</span>'
        }).data("kendoValidator");

Add the styling to make the error messages appear as tooltips:

span.k-widget.k-validator-tooltip {
        margin: 0; /* removes margin */
        width: 160px; /* set width */
        display: inline-flex; /* changes the appearance from block to inline */
        text-align: left; /* aligns the text */
    }

You can customize the styles further to match your requirements.

Here is a dojo example demonstrating the above.

Regards,
Aleksandar
Progress Telerik

[Wolfgang Weilguny]

Thank you very much for your help, that answered my question :)

[daniel]

Hi, i am Daniel

You can do it with Javascript like so

document.addEventListener('invalid', (function () { return function (e) { e.preventDefault(); document.getElementById("fname").focus(); }; })(), true);<form action="/action_page.php" method="post"><input type="text" id="fname" name="fname" required><input type="submit" value="Submit"></form>