JQuery mobile validation not working i.e. not showing validation messages

Question

I am trying to validate this form :

<form id="manage-form" data-ajax="false">

<label for="business_Name" >Business Name:</label>
<input type="text" class="required" name="business_Name" id="business_Name" data-mini="true"/>



<input id="submission" type="submit" value="insert"/>

</form>

AND THIS JAVASCRIPT:

var amandeepdb;

$(document).ready(function(){

amandeepdb = openDatabase('AAFeedbackdb','1.0','AAFeedbackdb','2*1024*1024');


createTable();
insertAAType();


$("#submission").on("click", function (evt){


    handleAddForm();
    return false;
});

});

function handleAddForm(){

$('#manage-form').validate({ 
    rules: {
        business_Name: {
            required: true,
            rangelength:[2,30]
        }
    },
    messages: {
        business_Name: {
            required: "required",
            rangelength : "between 2 to 30"
        }
    }


});
}

IT IS NOT VALIDATING WHEN I AM CLICKING THE INSERT BUTTON i.e. NOT SHOWING THE MESSAGES. The page just refreshes and doesn't show the message.

Answer 1

Quote OP:

"The page just refreshes and doesn't show the message."

It's not validating because you are not properly initializing the plugin. Since you put the .validate() method within a click handler, the plugin is not initialized until after the click... by that time it's too late.

You should never need to call .validate() within a function, click handler, etc.

// the click handler is not needed - delete this...
//$("#submission").on("click", function (evt){
//    handleAddForm();
//    return false;
//});

Simply placing .validate() within the DOM ready handler will properly initialize the plugin. Then the plugin will automatically capture the click of the submit button.

$(document).ready(function() {

    $('#manage-form').validate({  // initializes the plugin
        // your rules and options
    });

});

Use pageinit for jQuery Mobile "ready" event...

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

    $('#manage-form').validate({  // initializes the plugin
        // your rules and options
    });

});