Kendo Mobile validation with multiple views

7 posts, 0 answers
  1. Kevin
    Kevin avatar
    18 posts
    Member since:
    Sep 2010

    Posted 15 Jul 2014 Link to this post

    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.
  2. Kevin
    Kevin avatar
    18 posts
    Member since:
    Sep 2010

    Posted 15 Jul 2014 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 16 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Kevin
    Kevin avatar
    18 posts
    Member since:
    Sep 2010

    Posted 16 Jul 2014 in reply to Kiril Nikolov Link to this post

    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
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 17 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Kevin
    Kevin avatar
    18 posts
    Member since:
    Sep 2010

    Posted 18 Jul 2014 in reply to Kiril Nikolov Link to this post

    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
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 21 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready