Customized validation messages

2 posts, 0 answers
  1. Jeremy Wiebe
    Jeremy Wiebe avatar
    11 posts
    Member since:
    Jun 2012

    Posted 03 Oct 2012 Link to this post

    TL;DR - I want to provide a custom field name but use the built-in validation messages.  

    I am trying to customize the validation messages displayed by the Kendo validator in a mobile application.

    I've created a JsFiddle (http://jsfiddle.net/jeremy_wiebe/6nw8s/) to help show what's going on and the options for specifying validation options.  

    1. Don't provide anything, just let Kendo build the message using the input element's 'name' attribute.  This is sub-optimal because the 'name' attribute doesn't allow spaces in it and 'customerNumber1 is required' doesn't look good.
    2. Specify a 'title' on the input.  This is a start but kendo uses _only_ the 'title' attribute value for all validation messages.  This is again sub-optimal when the input may become invalid for multiple reasons (required, min/max values, incorrect format, etc).  Try putting '-100' the second field to see what I mean.
    3. Put a 'validationMessage' attribute on the input.  As far as I can tell this is identical to doing #2.  So it has the same shortcomings.
    4. Add custom data-{rule}-msg attributes for each type of validation you  might have on the attribute.  This solves the problem at the cost of making more verbose HTML.  Now I have to put a custom validation message on each HTML input form for each validation rule I have.
    Looking at the Kendo source I see that there's an object that stores the built-in validation rule messages.  These messages use the kendo formatting (see the _extractMessage function) to display a message and  have placeholders for the field name as well as any other dynamic validation bits that may be applicable for the message.

    So, what I'd like to be able to do is specify the 'title' attribute on the input (referring to my JSFiddle I'd use 'Customer #' from the second <input>) and have the kendo validator use that as the field name when it formats the built-in validation messages.  In this way the second input would show 'Customer # is required' if the field is empty and 'Customer # should be greater than or equal to 1' if the value is -11.  

    Is there any way to accomplish this as the code is now?
  2. Veronica
    Veronica avatar
    1 posts
    Member since:
    Oct 2012

    Posted 09 Oct 2012 Link to this post


    This is a "just to get you by" solution - as I'm sure you know, never a good idea to edit the code 'cos it's lost after the next release.. but I located this function and mucked about with it and now it's doing what I want - looks for label for Id, label for name, title attribute on input - and if none of those are found, uses the name of the input (ie what it does now).

    _extractMessage: function (b, d) { var e = this, f = e.options.messages[d], g = $("label[for='" + b.attr("id") + "']").html() || $("label[for='" + b.attr(m) + "']").html() || b.attr("title") || b.attr(m); f = a.isFunction(f) ? f(b) : f; return c.format(b.attr(c.attr(d + "-msg")) || b.attr("validationMessage") || f || "", g, b.attr(d)) }
  3. Kendo UI is VS 2017 Ready
Back to Top