页面刷新后 JQuery 验证不起作用 (Jquery Mobile)

Question

我有一个 Jquery Mobile/asp.net mvc4 应用程序。在第一页之后，Jquery Mobile 使用 Ajax 请求调用后续页面。现在，我使用 JQuery 验证器插件对我的表单执行验证，第一次验证工作正常(即当使用 ajax 调用加载时)但是当刷新/重新加载页面时验证不起作用。知道为什么会这样吗？由于这是一个移动网络应用程序，因此用户可能会刷新页面。

这是我用过的验证码:

<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

这是一个大胆的猜测，因为没有提供代码示例，我想您已经使用过:

$(document).ready(function() {    

});

初始化验证器插件是 jquery 的常见做法。不幸的是，document ready 不能与 jQuery Mobile 一起使用。

也不要使用:

$(function () {

});

使用 jQuery Mobile。

验证器插件应该在页面显示事件中初始化，如下所示:

$('#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();
        }
    });   
});

这是一个工作示例:http://jsfiddle.net/Gajotres/AZPhK/ .无论您关闭并返回首页多少次，每次显示页面时验证器都会初始化。

编辑:

如果您使用的是多 html 页面格式，请将此代码仅放入需要的页面，或者更好的是，创建一个新的 js 文件，将此代码(所有您自定义的 js 代码)放入其中并在所有 html 页面之间共享。