Using validation plugin with jQuery Mobile 1.4

Written by on March 21, 2015

Using validation plugin with jQuery Mobile 1.4

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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

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.



Categories

22 thoughts on “Using validation plugin with jQuery Mobile 1.4”

  1. 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

  2. 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.

  3. 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

  4. 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?

    • 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.

  5. 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

  6. 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

  7. 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?

  8. 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

  9. 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?

Leave a Reply