Kendo Mobile validation with multiple views

[Kevin]

Is there any way to load a view into the DOM in a Kendo Mobile app without navigating to it so I can perform a validation on the view?  For example, let's say I have two views "view1" and "view2" with "view1" being the view that is initially displayed.  Both views have required input fields.  Ideally, I would like to have a "Validate" button that performs validation on both views and displays a modal window listing the errors.  For example:

var errors = [];
var view1Validator = $('#view1').kendoValidator().data("kendoValidator");
if (!view1Validator.validate()) {
    errors = view1Validator.errors();
}

// unless the user has navigated to view2, it has not been loaded into the DOM, so view2Validator is always null
var view2Validator = $('#view2').kendoValidator().data("kendoValidator");
if (!view2Validator.validate()) {
    errors = errors.concat(view2Validator.errors());
}

// display the errors

The problem is that unless I have already navigated to view2, it's not yet loaded into the DOM, so the view2Validator is always null.

Thanks,
Todd.

[Kevin]

I neglected to mention that the views are stored in separate HTML files which is the reason they don't get initially loaded.

Thanks,
Todd

[Kiril Nikolov]

Hi Kevin,

If the view is stored in a separate HTML file then it is loaded into the DOM with an ajax request only when the user navigates to the view, and I am afraid that there is no workaround for this. What you can do is check if the view is loaded into the DOM and if not then the validation will always fail, if the view is loaded, then the validator will take care of the validation.

Regards,
Kiril Nikolov
Telerik

 

 

[Kevin]

Hi Kiril,

thanks for the reply.  The problem is that the app contains quite a large number of data entry fields (I'll estimate about 200), and thus is broken into 9 different views (all in separate HTML files).   In order to validate the form, I was hoping that the user would not have to navigate to each tab (so that the view is loaded into the DOM).  I did try adding code to perform an app.navigate()  for each view that was not loaded into the DOM, hoping that the call alone would load the view, but had no luck.  It's sounding like requiring the user to navigate to each tab before the form can be considered completely valid is my only solution.

Thanks,
Kevin

[Kiril Nikolov]

Hi Kevin,

App.navigate() should load the view into the DOM. I have tested it in the example that is attached and seems to be working correctly.  Basically the navigate() method is used when the user navigates to a certain view as well, so it should not make much of a difference.

Regards,
Kiril Nikolov
Telerik

 

 

[Kevin]

Hi Kiril,

thanks for the code.  Actually, what I was hoping to do was to issue a series of app.navigate() statements, which I had hoped would load all the views into the DOM, and then navigate back to the original view and perform the validation.  However, did not work

app.navigate("#view1");
var view1Validator = $('#view1').kendoValidator().data("kendoValidator");
app.navigate("#view2");
var view2Validator = $('#view2').kendoValidator().data("kendoValidator");
app.navigate("#view3");
var view3Validator = $('#view3').kendoValidator().data("kendoValidator");
app.navigate("#originalview");
// now perform the validation using for all views

I did find an acceptable solution however.  Just as background, the application consists of 10 views, with about 200 data entry fields and the user is able to save their incomplete work and come back to it at a later time.  When the user reloaded their data, I wanted to do a validation on all views.  My solution was to simply save a flag indicating whether each view had been validated so that when the user reloaded their data, I could change the badge on the appropriate tab indicating that the page's data was valid.  Any changes to a validated page removes the badge, until the user re-validates the data.   The solution works well, so I no longer need to try to attempt to perform a validation on all the views.

Thanks for your help,
Todd

[Kiril Nikolov]

Hi Kevin,

Issuing multiple navigate() methods will not work, as in general the app needs to load the view and perform the animations before issuing another navigate() statement, so it is expected to not work as expected in your case. 

I am glad that you found a solution, so I will go ahead and close this ticket, but in case you need any assistance, you can always reopen it.

Regards,
Kiril Nikolov
Telerik