Baby steps in Jquery Validations

Topics: Developer Forum
Developer
Aug 25, 2013 at 5:51 AM
I seem to have some problem with using Jquery validation. I've seen a lot of examples on the web and all seem to work 'if I replicate' what they are doing but it does not work in my AVFP system.

Anyone here using Ajax validator control with jquery mobile? If yes, what do I have to do? I am quite sure this is not AVFP problem but it is my AVFP project and this seems to be the right place to ask.


The files I have in my header

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>



Within the data-role = "page' ... or "dialog" I have..

<input type="text" name="name1" id="name1" class="required" >
<script type="text/javascript"> $("document").ready(function(){ $("form").validate(); }); </script>
Developer
Aug 25, 2013 at 10:29 AM
This would be of interest to all who are new to JQM validations. You'll find a lot, I mean a lot of snake oil sellers all over the place selling half baked tutorials on how to use jquery validations. If you are like me, you might start doubting AVFP since most end up telling you that something might be wrong in your application.

My problem was that Validations fired only after I refreshed the page or.. removed the ajax access to it.

These are the facts from someone who had a tough time taking the 1st step in JQuery Mobile validation.. but I am Not an expert.

1, Jquery Mobile validation is same as Jquery.

Fact: I found tons of experts who all said validation is same in both Jquery and mobile so can be used the same way. They have examples, that you can successfully replicate locally. So it is all very convincing. Sadly, this statement is NOT true. Only the jquery.validate.min.js is the same.
  1. If JQM validation is not working, then you can create code for click() event or use pure javascript.
Fact : This is true but unnecessary.
  1. Move the Script section to the 'Header' or 'Body' or 'page' or in one case, after the </html> tag.
Fact: The script tag can be in header or body. However, if it's in body, you need to place it within the div 'data-role=page'. If you have multipage document, each can have it's own script.
  1. Use the following script. They show you a working copy.
<script type="text/javascript"> $("document").ready(function(){ $("form").validate(); }); </script> Fact: These are the people you should bookmark so that you never listen to them again, even by mistake.


This is how it is done.
  1. In you header section link to
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
    These are enough to get you started.
The control which you want to validate should be of class="required"
  1. It is wrong to write the validation script as
<script type="text/javascript"> $("document").ready(function(){ $("form").validate(); }); </script> For JQM you need to use
<script> $(document).on('pageinit', function(){ $("#page form").validate(); }); </script> The document 'ready' does Not fire when you navigate from one page to another. JQuery mobile loads the header section once then just sucks in the <body> (page) from the new page but uses the previous page header section. Therefore, you need to use pageinit to initialize the validate.
  1. If you are using AVFP <%=inclide("header.avfp") %>, then you don't have the option to place this script in header section. So place it in the <body> tags, just ensure that it is within the div data-role="page".
  2. Now, the trick issue which no one seemed to mention but is available in JQuery Mobile documentation. The page 'id' MUST be different, not only when you have multipage AVFP document, but also between single page AVFP documents. So if you have 10 avfps documents, each one of these has one page, then you have 10 unique page ids, i.e. the id's of these pages must be unique, i.e. 1st page1.. to page10. Otherwise, the validation goes bonkers. This is due to the way JQM builds the DOM ( as explained in point 1 above).
That's it.