Add Custom validation message at runtime

11 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 03 Jun 2012 Link to this post

    I have a form where I make a call to the server and it gives me an array of errors that contains the key of the field and the message. How can I simply show these messages through the validation widget? 

    Something like:

    validator.AddError("Subject","My custom error from server");

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Jun 2012 Link to this post

    Hi Jonathan,

    I am not sure if I understood your scenario correctly. Generally speaking I you can customize the validation messages through the validator configuration and / or create a custom validation rules, however the validator does not have an AddError method.
    Could you please take a look at this example and let me know if I missed something?

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 07 Jun 2012 Link to this post

    Well so how do I add multiple custom messages from the server? So if there are additional fields each with their own customer error message. Here is the updated example http://jsfiddle.net/Lbc5a/
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Jun 2012 Link to this post

    Hello Jonathan,

    Basically the approach for adding multiple messages is identical to the previous one:
    //JSON returned from the server
    {
        "required": "My custom required message",
        "anotherCustom": "Only John Doe can book a ticket",
        "email": "That's a wrong email!",
        "custom": "You are not John!"
    }
     
    //validator set up
    validator = $("#tickets").kendoValidator({
        rules: {
            custom: function(input) {
             //...
            },
            anotherCustom: function(input) {
             //...
            }                   
        },
        messages: myMessages
    }).data("kendoValidator");

    For convenience I have updated the Fiddle, please check the result.

    Greetings,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 15 Jun 2012 Link to this post

    I see how that works but i am really looking for something even simpler than that. Because on the client side I might not know the rules to define, I just know I am getting back a list of messages that contain the Field name and the message for the error. So I can't define the rules portion of that example. So it has to be a little more dynamic. Or it really just needs to be as simple as:

    validator.addError(FieldName, ErrorMessage);

    I have used validation frameworks in the past that were pretty much that simple. Understand the rules setup but seems in cases like this I need something super simple. 
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 Jun 2012 Link to this post

    Hi Jonathan,

    The validator does not have an addError method as the one you are looking for, so if I understood it correctly your scenario is not supported. 

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 27 Jun 2012 Link to this post

    Ok I a managed to make it work, you can see the code below:

    var validator;
     
    $.ajax({
        //using jsfiddle echo service to simulate JSON endpoint
        url: "/echo/json/",
        dataType: "json",
        type: "POST",
        data: {
            // /echo/json/ echoes the JSON which you pass as an argument
            json: JSON.stringify(
                {
                 email: "That's a wrong email!",
                 FirstName: "No johns allowed.",
                 email: "Only John Doe can book a ticket this is email validation"}
            )
        },
        success: function(response) {
            var myMessages = response;
             
            var myRules = new Object();
             
            for(var messageName in myMessages)
            {
             myRules[messageName] =    function(input) {
                        if (input[0].id == myMessages[input[0].id])
                        {
                 return false;
                        }
             };
            }
             
            validator = $("#tickets").kendoValidator({
                rules:myRules,
                messages: myMessages
            }).data("kendoValidator");
             
            var status = $(".status");
                 
            $("button").click(function() {
                if (validator.validate()) {
                    status.text("Hooray! Your tickets has been booked!").addClass("valid");
                    } else {
                    status.text("Oops! There is invalid data in the form.").addClass("invalid");
                }
            });
        }
    });

    I also updated the jsfiddle example. http://jsfiddle.net/Lbc5a/33/
  9. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 27 Jun 2012 Link to this post

    Wait that didn't work but it is closer. Any ideas? Right now it is throwing more validation errors on things that don't have validation.
  10. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 27 Jun 2012 Link to this post

    I have updated the jsfiddler to my current attempt to pull off what I need. But the issue now is that it shows the same error message for every field that has an error and doesn't base it on the name of the rule. I am so close to getting this.

    Any ideas?
  11. sri
    sri avatar
    1 posts
    Member since:
    Sep 2013

    Posted 17 Apr 2014 in reply to Jonathan Link to this post

    Hi, I am working on the same issue as you had posted sometime back. Did you get the custom validation messages to display at the respective input fields dynamically? Please provide your solution if possible. Thanks.
  12. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Apr 2014 Link to this post

    Hello Sri,

    This topic is about two years old. My recommendation is to check the following help articles as they contain accurate information and code samples which you can run and test on your side (all you need to do is to put them in a HTML page with Kendo UI included).

    Please check the help topics and open a new forum thread in case you have any further questions. We will appreciate if you provide the needed details in it (sample/code) so we can spot the issue faster and assist you accordingly.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready