页面刷新后 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 的常见做法。不幸的是，文档就绪不能与 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 页面之间共享。