HTML5 constraints and applying custom validation rules

[Jake]

Hi

I have read on http://docs.telerik.com/kendo-ui/framework/validator/overview the following

"Any HTML5 constraints applied to a form (required, type, etc.) will be checked before custom rules are evaluated. Custom rules will not run until a input passes the basic HTML5 constraints."

Could I clarify this statement. If I have 10 controls on a page. Say the first two are required and the last 8 have a custom rule attached to them. At the moment the behaviour I am seeing is that if control 1 or 2 fails the required validation then the last 8 will not fire the custom rule. Once 1 and 2 are populated (and passing the required rule) then the custom rules are then run. Is this expected behaviour or is there a problem in my solution? (I am not sure from the statement if the logic of "HTML5 constraints must pass before custom rules are run" is at the form level or at each individual input level)

Assuming the above is expected behaviour. Currently we have custom validation rules that enforce "required if" functionality. So a field may be required if a checkbox is ticked for example. Ideally I would like all my validation rules to fire at once and not the two step approach currently available. Is there a way to run the custom validation rules even if the HTML5 constraints applied to a form (required, type, etc.) fail.

Thanks

Jake

[Jake]

Hi

Think I have found the problem when creating the form I was setting up custom rules but when manually calling the validate I was running something like
 $("form").submit(function(event) {
      event.preventDefault();
      if ($("#tickets").kendoValidator().data("kendoValidator").validate()) {
etc

The line $("#tickets").kendoValidator(). will create another validator without custom rules. I was then getting odd behaviour as there seemed to be two validators attached one with basic validation and another with the customer rules. Not exactly sure what was going on. I now create my validator when the form loads via a separate shared script file and then retrieve it via a selector for the submit-

  var theValidator = $('#myselector'); // you can get this when you create the validator by looking at what form.kendoValidator returns
        
if (theValidator.data('kendoValidator').validate() === false) {
// form is invalid so skip submit action and leave the modal and form displayed
e.preventDefault();
}
else {

Still looking at this.

Jake

[Rosen]

Hello Jake,

The current flow of the Validator validate logic is that validation rules are run for each input element inside the validated container. However, if one validation rule fails for given element, the rest of the validation rules are not executed for this element and the validation process is restarted with the next element. For example if there are two validation rules - required and custom, if all of the elements are empty then the custom rule will not be executed until the first rule is not satisfied.

Regarding the setup described in your second message. Indeed, the construct used will create another Kendo UI Validator instance and trigger its validation. This will happen in parallel with the original validator instance which seems to be attached to the form element. As you may know when Kendo UI Validator is attached to a form element the validation will be triggered automatically when the form is submitted - thus, there is not need to explicitly call validate method.

Regards,
Rosen
Telerik