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

kendoValidator and AddModelError

3 Answers 287 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nassouh Chehayeb
Top achievements
Rank 1
Nassouh Chehayeb asked on 24 Feb 2016, 03:36 PM

Hello.

I'm using kendoValidator to display all my validation errors with the kendo validation template. Using this:

 

<script>    
    $(function () { $("form").kendoValidator();});
</script>

 

But I have certain errors that I handle server side in the controller. Because they are kind of complex. And then I added the errors to the model this way:

 

ModelState.AddModelError("Hours", "The hours and the minutes can't be both 0.");

 

But if I add an error this way it is displayed with the standard ASP NET MVC way:

 

 

<span class="field-validation-error text-danger" data-valmsg-for="Hours" data-valmsg-replace="true">The hours and the minutes can't be both 0</span>

 

┬┐Is some kind of way to display those errors like the kendoValidator  way?

In the image attached I show one error client side like kendo validation and two error's server side. I would like to all of then be like the client side error.

Thank you.

<span class="field-validation-error text-danger" data-valmsg-for="Hours" data-valmsg-replace="true">The hours and the minutes can't be both 0.</span>

3 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 29 Feb 2016, 05:29 AM
Hi,

You can convert the messages via JavaScript on document ready:
<script type="text/kendo-template" id="message">
    <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
        <span class="k-icon k-warning"> </span> #=message#
    </span>
</script>
 
<script type="text/javascript">
     
    $(function () {
        $("form").find(".field-validation-error").replaceWith(function (e) {
            var element = $(this);
            return validationMessageTmpl({ field: element.attr("data-valmsg-for"), message: element.text() });
        });
        var validationMessageTmpl = kendo.template($("#message").html());
        $("form").kendoValidator();
    });
</script>

The validator will not style the messages unless there is a client-side validation rule for the inputs.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nassouh Chehayeb
Top achievements
Rank 1
answered on 01 Mar 2016, 08:43 AM

It worked perfectly. 

Thank you very much.

0
Steve
Top achievements
Rank 1
answered on 30 May 2018, 09:06 PM

Had to tweak the template a bit:

    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="display:block; margin-top: 6px;" data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage" role="alert">
        <span><i class="k-icon k-i-warning"></i>#=message#</span>
        <span class="k-callout k-callout-n"></span>
    </div>

Tags
General Discussions
Asked by
Nassouh Chehayeb
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Nassouh Chehayeb
Top achievements
Rank 1
Steve
Top achievements
Rank 1
Share this question
or