This question is locked. New answers and comments are not allowed.
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
<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