Question

I have a Jquery Mobile/ asp.net mvc4 application. After the first page, subsequent pages are called by Jquery mobile using Ajax requests. Now, I used JQuery validator plugin to perform validation on my forms, the validation is working fine first time(ie when loaded using ajax calls) but when a page is refreshed/reloaded the validation is not working. Any idea why this is happening? As this is a mobile web application there is a possibility users might refresh pages.

this is the validation code I have used:

<script type="text/javascript">    
// jquery form validation function
$(function () {
    $("#permissionRequestForm").validate({
        errorPlacement: function (error, element) {
            if (element.attr("name") === "fromTimeHH" || element.attr("name") === "toTimeHH" || element.attr("name") === "fromTimeMM" || element.attr("name") === "toTimeMM") {
                error.insertAfter($(element).parent());
            } else {
                error.insertAfter(element);
            }
        },

        //custom validation messages
        messages: {
            fromDate: "Choose From Date",
            toDate: " Choose To Date",
            fromTimeHH: "Choose From Time",
            fromTimeMM: "",
            toTimeHH: "Choose To Time",
            toTimeMM: "",
            permissionTypeOne: "Select Permission Type",
            permissionTypeTwo: "Select Permission Type",
            approverList: "Select Approver",
            reasonLeave: "Enter a Valid Reason"
        }
    });
});

Answer 1

This is a wild guess because code sample was not provided, I presume you have used:

$(document).ready(function() {    

});

to initialize a validator plugin what is a common practice for jquery. Unfortunately document ready can not be used with jQuery Mobile.

Also do not use :

$(function () {

});

With jQuery Mobile.

Validator plugin should be initialized in page show event, like this:

$('#index').live('pageshow',function(e,data){    
    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
    }, "");

    $("#form1").validate({
        rules: {
            select_list : {valueNotEquals: "default"},  
        },
        messages: {  
            select_list : { valueNotEquals: "You must select a value" }
        },        
        submitHandler: function(form) {
            alert($('#form1').valid());
            form.submit();
        }
    });   
});

And here’s a working example: http://jsfiddle.net/Gajotres/AZPhK/. No matter how much time you close and return to first page, every time page is shown validator will initialize.

EDIT :

IF you are using multi html page format put this code only into wanted page, or better, create a new js file, put this code (all all your custom js code) in it and share it among all html pages.