This jQuery plugin makes client side form validation easy, whilst still offering plenty of customization options. Other prominent validation plugins exist but this one is still the most commonly used one, not to mention it works very well with jQuery Mobile. Unfortunately, it is not an easy task to find a working example.
 
There are several crucial factors working against us and the main one is frameworks shifting markup. This article will present you a working example, covering only jQuery Mobile 1.4 (leave me a comment if you need an example for older jQM versions). You should consider an upgrade in case you are still using older jQuery Mobile version.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Intro

 
First thing first, before we can continue I need to give you a warning. Like I said few lines before, this example will work only with jQuery Mobile version 1.4 and above. This is because jQuery Mobile version 1.4 brought us changes to page markup, almost every aspect of page HTML/CSS structure was changed.
 

Solution

 
I made a small working example for this article. We will have a form with 3 input elements and example will check if everything is filled correctly.
 
HTML:
 
<div data-role="page" id="home" data-theme="b">
    <form id="form1">
        <div data-role="header">
            <h2>Get Update</h2>
            
        </div>
        <div data-role="content">
            <div data-role="fieldcontainer">
                <label for="fname" data-theme="d">First Name:</label>
                <input type="text" id="fname" name="fname" data-theme="d" placeholder="Enter First Name"/>
                <br />
            </div>
            <div data-role="fieldcontainer">
                <label for="lname" data-theme="d">Last Name:</label>
                <input type="text" id="lname" name="lname" data-theme="d" placeholder="Enter Last Name"/>
            </div>
            <div data-role="fieldcontainer">
                <label for="email" data-theme="d">E-mail Address:</label>
                <input type="email" id="email" name="email" data-theme="d" placeholder="Enter Email"/>
            </div>             
        </div>
        <div data-role="footer" data-position="fixed">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-a">
                        <input type="button" data-icon="delete" value="Cancel" id="cancel"/>    
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar ui-bar-a">
                        <input type="submit" data-icon="check" value="Submit" id="submit"/>
                    </div>
                </div>
            </div>
        </div>
    </form>                   
</div>
<div data-role="page" id="success" data-theme="b">
    <div data-role="header">
        <h2>Thank You !!!</h2>
    </div>
</div>
 
Javascript:
$('#form1').validate({
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true
        }
    },
    messages: {
        fname: {
            required: "Please enter your first name."
        },
        lname: {
            required: "Please enter your last name."
        },
        email: {
            required: "Please enter your email."
        }
    },
    errorPlacement: function (error, element) {
        error.appendTo(element.parent().prev());
    },
    submitHandler: function (form) {
        $(':mobile-pagecontainer').pagecontainer('change', '#success', {
            reload: false
        });
        return false;
    }
});
 
CSS:
.error {
    color:red;
}
 
Working jsFiddle example can be found here: http://jsfiddle.net/Gajotres/RLJHK/
 
 
Just click on button Submit if you want to find final validation result. This example will more or less also work in lower jQuery Mobile versions. You will only need to change this line:
 
error.appendTo(element.parent().prev());
 
and this one:
$(':mobile-pagecontainer').pagecontainer('change', '#success', {
    reload: false
});
 
Pagecontainer container don’t exist in jQuery Mobile 1.3 and below.
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Alejandro

    Hi, the code was great, but when I click on summit and the form validate is OK I need to call a function to make the login and depend of the result a must change or not the page.

    Could you show an example about that?

    Regards

  • nacho

    Is it possible to validate a jqm listview with this plugin? thx.

    • Yes you can validate jQuery Mobile listview with this plugin, mostly because jQuery Mobile still uses common listview element in the background.

  • Ola

    Where do i hook the js code? i have tried page init, pageshow, inside a function, all come up with one error or the other.

  • I’m a newbie….
    How would this work if you were going to POST the form to a server? It appears that the submit just takes you to the jquery mobile page

  • Tomas

    Hello, this code looks very good, but when i copy the code to my project, nothing happens, not working… From my console: Uncaught TypeError: Cannot set property ‘mobile’ of undefined test%20validace.html:47. Uncaught ReferenceError: $ is not defined….. Where is the problem, please? I am looking for validation plugins 3 days and nothing works. It is a mystery for me, what am I doing wrong?

    • Always google your errors, $ is not defined means jQuery is not initialized.

    • Tomas

      I found the problem after showing the source code in jsfiddle: there is not jquery.validate.min.js link in your code. 😀 Why there is no word about the jquery.validate.min.js please? So your solution is confusing….

      • Have you ever wondered to look at the jsFiddle External Resources? There’s nothing confusing in my jsFiddle example, you just need to learn how to use it.

  • Markus

    Hi
    I am trying to set up a jquery mobile app using this validator. I use the multipage template (all pages are in one html file ). My app is multilingual (german & english)… now the question is how can i make the validator multilingual? jQuery Validator offers the possibility to work with localization files, but as jQuery Mobile loads all my *.js files just once at the app startup, I cannot change the localization file at runtime.
    Do you have any idea how I can solve that?
    Would be great to read from you soon.
    Greez Markus

  • Ike

    I love reading your blog on jquery mobile. You have an error in the code above, on the javascript section on the message part you have lname twice it should be email

  • Lynn

    I know this is an old post but I am using the validation plugin with jQuery 1.4.0. The plugin has a method called jQuery.validator.setDefaults() to set the default settings. If I want these settings to be for my entire application (which uses a multi-page template structure), where would be the correct location to place it? If I put it in the pagecreate event handler, wouldn't it call the method multiple times? So should this go in the mobileinit event handler as it is triggered once?

    • You can set them as a global JavaScript variable, inside your main (first) HTML page. This way it will persist in memory.

  • Jose

    Hi, are you sure you don’t need to add the validation plugin .js ?. I copy paste your example and the browser says : Uncaught TypeError: $(…).validate is not a function

    • If you carefully take a look at provided jsFiddle example, on the right side there’s a section called External resources, jquery.validate.min.js is injected there. Embeded example would not work without it.

    • JOse

      sorry is the same question posted below by Thomas.

  • Andrew Metzger

    Hey Great post! Thank you! I just had a question. I have all of my labels hidden using class=”ui-hidden-accessible” is there another way i can display the error without having to display the label?