Validator behaves differently when triggered by Javascript

2 posts, 0 answers
  1. Timothy
    Timothy avatar
    2 posts
    Member since:
    Jul 2013

    Posted 25 Feb 2014 Link to this post

    So I have a template containing forms, like so:

        <form id="add-set-form-0" class="exercise-set-row">
        <label>Set 1: Weight </label><input required data-bind="value: sets[0].weight" /><br/>
            <label>Reps: </label><input required data-bind="value: sets[0].reps" /><br/>
            <button type="submit">Submit</button>
            <a data-role="button" id="blah" data-set-number="0" data-bind="click:validate" class="km-widget km-button"><span class="km-text">Finish Set</span></a>

    The submit button there is purely experimental, but when I click the button, the form validates and I get nice pretty error messages.

    The "Finish Set" button attempts to do the same thing programattically with this code: 
             var target =;
                var setNumber = $('setNumber');
                var formId = "add-set-form-" + setNumber;
            //var validatable = document.getElementById(formId).kendoValidator().data("kendoValidator");
                var validatable = $("#add-set-form-0").kendoValidator().data("kendoValidator");
                if (validatable.validate()) {
                    window.alert("Validated succesfully")

    The code version also validates, but when it does so it validates super ugly.  Instead of a nicely formatted CSS popover, I get a blob of red text inserted inline in the middle of the form.  Why would the two calls to the kendo validator produce such visually different results?


  2. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 28 Feb 2014 Link to this post

    Hi Timothy,

    Since there are no screenshots attached to the ticket the validation messages styling issue which you described is not clear. The potential issue which I noticed in your code snippet is that you are initializing the Kendo Validation in the click event handler of the "Finish set" button.
    var formId = "add-set-form-" + setNumber;
    var validatable = $("#add-set-form-0").kendoValidator().data("kendoValidator");
    if (validatable.validate()) {
        window.alert("Validated succesfully")

    Are you calling .kendoValidator() anywhere else? If the validation is already initialized the code should look like:
    var validatable = $("#add-set-form-0").data("kendoValidator");

    In case this is not the case, you are probably seeing initially some other's validator messages and do not like the way Kendo Warning messages popup. You can see how Kendo Validator messages look like in this demo:

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top