Fatal编程技术网
  • javascript/
  • Javascript 通过ajax加载页面时的jQuery验证？

Javascript 通过ajax加载页面时的jQuery验证？

javascript jquery ajax

Javascript 通过ajax加载页面时的jQuery验证？,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在通过jQuery加载功能加载页面。 我的问题是jQuery验证在第一个页面上运行良好，但由于其他页面是通过ajax加载的，所以它不起作用。请在下面找到jsp&js文件。 这是因为使用ajax页面加载时页面源代码不会更改。 我应该使用显示/隐藏功能吗？ //Main.jsp <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"

我正在通过jQuery加载功能加载页面。
我的问题是jQuery验证在第一个页面上运行良好，但由于其他页面是通过ajax加载的，所以它不起作用。请在下面找到jsp&js文件。
这是因为使用ajax页面加载时页面源代码不会更改。 我应该使用显示/隐藏功能吗？
//Main.jsp

              <script
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
                type="text/javascript"></script>

            <script
                src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
                type="text/javascript"></script>
            <script
                src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
                type="text/javascript"></script>
            <link rel="stylesheet"
                href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

            <link rel='stylesheet' type='text/css' href='css/styles.css' />
            <script type="text/javascript" src="js/main.js"></script>
            <script src="Jquery/myscript.js"></script>


            </head>
            <body>
                <div id="top">
                    <div id='mainMenu'>
                        <ul>
                            <li><a id="home"><span>Home</span></a></li>
                            <li><a href='#'><span>Hot Deals</span></a></li>
                            <li><a><span id="logPage">Login</span></a></li>
                            <li><a id="regPage"><span>Register</span></a></li>
                            <li><a id="usPage"><span>About</span></a></li>
                            <li class="last"><a id="adminPage"><span>Adminstration</span></a>
                        </ul>
                    </div>
                    <div id="mainPages">
                        <jsp:include page="Search.jsp"></jsp:include>
                    </div>
                    <div id="errors">
                        <s:actionerror />
                        <s:actionmessage />
                    </div>
                </div>

            </body>
            </html>
        //main.js

        $(document).ready(function() {

            $("#logPage").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load('Index.jsp');
            });
            $("#regPage").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load("Register.jsp");
            });
            $("#usPage").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load("About.html");
            });
            $("#home").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load("Search.jsp");
            });
            $("#adminPage").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load("../AdminLogin.jsp");
            });

        });
    //myscript.js
    $(document).ready(function() {

        $("#myform").validate({
            rules : {
                email : {
                    required : true,
                    email : true
                },
                password : {
                    required : true,
                    minlength : 8
                },

            },
            messages : {
                email : {
                    required : "Please Enter email",
                    email : "Valid Email Please"
                }
            }
        });

        $("#regform").validate({

            rules : {
                email : {
                    required : true,
                    email : true
                },
                password : {
                    required : true,
                    minlength : 8
                },
                fname : {
                    required : true,
                    lettersonly : true
                },
                lname : {
                    lettersonly : true
                },
                mname : {
                    lettersonly : true
                },
                geneder : {
                    required : true
                },
                city : {
                    required : true
                },
                zip : {
                    required : true,
                    digits : true,
                    minlength : 6,
                    maxlength : 6
                },
                mobno : {
                    required : true,
                    digits : true,
                    minlength : 10,
                    maxlength : 10
                },
                dob : {
                    required : true
                }
            },
            messages : {
                email : {
                    required : "Please Enter email",
                    email : "Valid Email Please"
                }
            }

        });
        $("#travelDate").datepicker({
            defaultDate : '0',
            numberOfMonths : 1,
            minDate : '0',
            maxDate : '1M'
        });
        $("#searchForm").validate({

            rules : {
                fromCity : {
                    required : true,
                    lettersonly : true,

                },
                toCity : {
                    required : true,
                    lettersonly : true
                },
                seats : {
                    required : true,
                    digits : true,
                    min : 1,
                    max : 9,
                },
                travelDate : {
                    required : true,
                }
            },
            messages : {

            }
        });
    });
    )};



    

  • 

  • 登录
    • 

  • 登记册
    • 

  • 关于
    • 
管理


//main.js
$（文档）.ready（函数（）{
$（“#日志页”）。单击（函数（）{
$（“#主页”）.empty（）；
$（'#mainPages'）.load（'Index.jsp'）；
});
$（“#regPage”）。单击（函数（）{
$（“#主页”）.empty（）；
$（'#mainPages'）.load（“Register.jsp”）；
});
$（“#usPage”）。单击（函数（）{
$（“#主页”）.empty（）；
$（'#mainPages'）.load（“About.html”）；
});
$（“#主页”）。单击（函数（）{
$（“#主页”）.empty（）；
$（'#mainPages'）.load（“Search.jsp”）；
});
$（“#adminPage”）。单击（函数（）{
$（“#主页”）.empty（）；
$（'#mainPages'）.load（“../AdminLogin.jsp”）；
});
});
//myscript.js
$（文档）.ready（函数（）{
$（“#myform”）。验证({
规则：{
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：8
},
},
信息：{
电邮：{
必填：“请输入电子邮件”，
电子邮件：“请发送有效电子邮件”
}
}
});
$（“#regform”）.validate({
规则：{
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：8
},
fname：{
要求：正确，
信一：真的
},
名称：{
信一：真的
},
mname：{
信一：真的
},
geneder：{
必填项：true
},
城市：{
必填项：true
},
邮编：{
要求：正确，
数字：对，
最小长度：6，
最大长度：6
},
莫布诺：{
要求：正确，
数字：对，
最小长度：10，
最大长度：10
},
出生日期：{
必填项：true
}
},
信息：{
电邮：{
必填：“请输入电子邮件”，
电子邮件：“请发送有效电子邮件”
}
}
});
$（“#travelDate”）.datepicker({
defaultDate:“0”，
月数：1，
minDate:'0'，
maxDate:'1M'
});
$（“#搜索表单”）.validate({
规则：{
来自城市：{
要求：正确，
信一：没错，
},
城市：{
要求：正确，
信一：真的
},
座位：{
要求：正确，
数字：对，
民:1,，
最高：9，
},
旅行日期：{
要求：正确，
}
},
信息：{
}
});
});
)};
试试看

对所有
表单
重复上述操作，您的
main.js
很好

尝试以下步骤：

1） 将
$（document）.ready（function（）
更改为
myscript.js中的方法lets call
function validator（）

2） 在通过ajax调用加载的所有页面中使用
onload=validator（）
。

动态加载的元素是否存在需要由
$（“#someDynamicElement”）.live（）而不是
$（document）.ready（）确定。。如果这对你有帮助，我在生成表单时遇到了类似的问题。
在每次ajax请求后附加验证所有页面都包含myscript.js？@Sridhar R是所有页面都包含myscript。js@Ahmad你能提供一些链接/参考来在每个ajax请求后附加验证吗？你的ajax响应页面有验证脚本吗？谢谢，我在同一个页面上有很多表单页面如何区分b/w。感谢您的输入，我不想在加载时验证，而是在提交/点击表单时验证。

$(document.body).on('click', 'input[type="submit"]', function(){
   var $form = $(this).closest('form');
       $form.validate({