页面刷新后JQuery验证不起作用（Jquery Mobile）

Question

我是一名有用的助手，可以为您翻译文本。

我有一个Jquery Mobile/ asp.net mvc4应用程序。在第一页之后，Jquery移动使用Ajax请求调用后续页面。现在，我使用了JQuery验证器插件来对我的表单执行验证，第一次时验证正常工作(即在使用ajax调用加载时)，但当页面刷新/重新加载时，验证不起作用。有什么想法为什么会发生这种情况吗?由于这是一个移动Web应用程序，用户可能会刷新页面。

这是我使用的验证代码:

<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"
        }
    });
});

- anwith.ct

---

展示你的代码，没有它我们无法做太多事情。但是让我问你一个问题，你是使用文档就绪状态来初始化验证插件，还是使用pageshow事件（或任何其他页面事件）？此外，你是使用多HTML页面格式还是1个HTML具有多个页面？ - Gajotres

嗨，我会尝试添加一些代码，我没有使用任何事件，并且它是多个HTML页面格式而不是单个HTML。 - anwith.ct

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页面之间共享它。

- Gajotres

---

谢谢！在使用实时事件后，效果非常好 :) - anwith.ct

在给出的示例中，如果我们提交一个表单而没有选择任何值，那么就会出现错误消息。之后，当我们转到下一页并返回到上一页时，仍然会显示错误消息。我们该如何解决这个问题？ - Asif Mehmood