Validator behaves differently when triggered by Javascript

[Timothy]

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>
    </form>

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 = e.target;
            
            var setNumber = $(e.target).data('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?

Thanks,
Tim

[Alexander Valchev]

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: http://demos.telerik.com/kendo-ui/web/validator/index.html

Regards,
Alexander Valchev
Telerik