.validate() not working in jQuery Mobile

Question

It is my first time using the plugin and .validate() method. Now I have a form and every time I click the submit button it runs with out doing the form validation. Here is my code:

<form class="form d" method="post" action="">
                <input type="text" name="searchtitle" id="searchtitle" placeholder="Enter the textbook's title">
                <input type="text" name="searchauthor" id="searchauthor" placeholder="Enter the textbook's author">
                <input type="text" name="searchpublisher" id="searchpublisher" placeholder="Enter the textbook's Publisher">
                <input type="text" name="searchedition" id="searchedition" placeholder="Enter the textbook's edition">
                <select name="searchuniversity" id="searchuniversity"></select>
                <select name="searchuniversitycampus" id="searchuniversitycampus" ></select>
                <input type="submit" id ="searchsubmit" name="searchsubmit" value="Search">
            </form>

I then have the following Javascript:

$(document).on('pageinit',"#searchpage",
    //this funciton will carry out the things we need to do to carry out our search
    function(e)
        {
            e.preventDefault();

            $(".form.d").validate({
                rules: {
                    name: {
                    required: true
                    },
                    email: {
                    required: true,
                    email: true
                    },
                    comments: {
                    required: true,
                    minlength: 5,
                    nourl: true
                    }
                },
                messages: {
                    name: "Required Field",
                    email: "Valid Email Required",
                    comments: "Required Field + No URL's"
                }
          });           


            $("#searchsubmit").click(
                    function(e)
                    {
                                          //Do a lot of processing here
                                        });
});

Like I said I'm very new to doing the forma validation and using the function.

Here is a jsFiddle of the problem. When you click on submit in the fiddle it alerts "hello" and then it does the validation. How to stop this from happening. i.e validate first 1st and then run the function?

Answer 1

Your whole problem is your click handler. The plugin already has callback functions built in that will capture the click event of the submit button. Use the submitHandler to fire a function when the form is valid. Use the invalidHandler to fire a function when the form is invalid.

You already have the submitHandler callback in your jsFiddle so I refactored your jsFiddle code as follows:

$(document).on('pageinit', function(){

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true
            }
        },
        submitHandler: function (form) {
            alert("hello");  // stuff to do when form is valid
            alert('valid form submitted'); // for demo
            return false; 
        },
        invalidHandler: function () {
            // stuff to do when form is invalid
            alert("invalid form");  // for demo
        }
    });

    // remove click handler
    // use the plugin's built-in callback functions instead
    //$("#test").click(function(){alert("hello")});

});

DEMO: http://jsfiddle.net/BTwaP/1/

See documentation for all callback functions

---

EDIT:

As of jQuery Mobile version 1.4, the pageinit event has been deprecated and replaced with pagecreate.

Good Reference: https://stackoverflow.com/a/14469041/594235