This is a migrated thread and some comments may be shown as answers.

Validation Message Bubble

3 Answers 47 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Wolfgang Weilguny
Top achievements
Rank 1
Veteran
Wolfgang Weilguny asked on 13 Aug 2020, 12:59 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Aleksandar
Telerik team
answered on 18 Aug 2020, 07:04 AM

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

0
Wolfgang Weilguny
Top achievements
Rank 1
Veteran
answered on 19 Aug 2020, 09:26 AM
Thank you very much for your help, that answered my question :)
0
daniel
Top achievements
Rank 1
answered on 11 Feb 2021, 05:40 AM

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>

Tags
General Discussions
Asked by
Wolfgang Weilguny
Top achievements
Rank 1
Veteran
Answers by
Aleksandar
Telerik team
Wolfgang Weilguny
Top achievements
Rank 1
Veteran
daniel
Top achievements
Rank 1
Share this question
or