jq生成的表单为什么不能验证呢？要怎么样才能实现验证呢？
我用JQ生成 了一个表单，做validate验证没有效果，没有反应，要怎么样才可以验证这个表单?
下面这是整个页面的代码，直接复制就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态生成表单，无法验证</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.modal_blackout {position: fixed;top: 0;left: 0;right: 0;bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);}
.modal_overlay {width: 488px; min-height: 339px; position: fixed;left: 430px; top: 40px; background-color: #FFF;
border-radius: 20px; color: #333;}
.address {top: 20px!important;}
.modal_title {padding: 0 40px; margin-top: 10px; position: relative;}
.modal_title span {height: 50px; line-height: 50px; font-size: 16px; font-weight: bold;}
.Mod_close_btn {position: absolute; top: 16px!important; right: 30px!important;}
.Mod_close_btn:hover {position: absolute; top: 12px!important; right: 25px!important;}
.modal_inner {margin: 20px 40px 40px 40px; padding-top: 20px;}
.Mcontrol_label {float: left; margin-right: 10px; width: 105px; line-height: 35px; text-align: right;
font-size: 15px; font-weight: bold;}
.Mcontrol_input {float: left; width: 288px;}
.P_info {padding: 2px 7px; width: 263px; line-height: 30px; border: 1px solid #BBB; border-radius: 5px;
font-size: 15px; color: #444; outline: none;}
.city {margin-right: 14px; margin-top: 3px; padding: 0 5px; width: 60px!important; line-height: 25px!important;
font-size: 12px;}
.errorHint {margin: 10px 0; width: 100%; height: 18px; font-size: 12px; color: red; float: left;}
.control_input {float: left; margin: 20px 120px 40px 120px;}
.bind_btn {margin: 0 10px; width: 60px; height: 35px; border-radius: 18px; font-size: 15px; outline: none;
cursor: pointer;}
.bind_confirm {color: #FFF; background-color: #26E4B5; line-height: 35px;}
.bind_confirm:hover {background-color: #18B991;}
.bind_cancel {border: 2px solid #BBB; background-color: #FFF;}
.Detailed_ad {padding: 2px 6px; border: 1px solid #BBB; border-radius: 5px; outline: none; box-sizing: border-box;
resize: none;}
.address_error {margin: 3px 0!important;}
</style>
<script type="text/javascript">
$(document).ready(function() {
show_Bmodal("#change_PWD");
close_bind('.Mod_close_btn');
close_bind('.bind_cancel');
Bform_request('#cPWD_btnC');
});
var modal_overlay = '<div class="modal_blackout"></div><div class="modal_overlay"><div class="modal_title"><span></span><a href="javascript: void(0)" class="Mod_close_btn"></a></div><div class="modal_inner"><form action="" class="modal_dialog" id="BPWD_F"><div class="control_input"><input type="submit" class="bind_btn bind_confirm" value="确定"><input type="reset" class="bind_btn bind_cancel" value="取消"></div></form></div></div>';
var modal_dialog = '<div class="Mform_group"><label class="Mcontrol_label"></label><div class="Mcontrol_input"><input type="text" class="P_info" value=""><div class="errorHint"></div></div></div>';
//动态生成的修改密码表单
function show_Bmodal(el) {
$(el).click(function() {
$(".right-container").append(modal_overlay);
var html = '';
for (var i = 0; i < 3; i++) {
html += modal_dialog;
}
$('.modal_title>span').text('修改密码');
$(".bind_confirm").attr({id: 'cPWD_btnC'});
$(".modal_dialog").prepend(html);
$(".Mform_group").eq(0).find('.Mcontrol_label').text('输入原始密码：');
$(".P_info:eq(0)").attr({type:'password', id:'old_PWD', name:'old_PWD', placeholder:'输入密码'});
// $(".Mform_group").eq(0).find('.errorHint').text('请输入6-16位密码，区分大小写，不能使用空格！');
$(".Mform_group").eq(1).find('.Mcontrol_label').text('输入新密码：');
$(".P_info:eq(1)").attr({type:'password', id: 'new_PWD', name: 'new_PWD', placeholder:'输入密码'});
// $(".Mform_group").eq(1).find('.errorHint').text('请输入6-16位密码，区分大小写，不能使用空格！');
$(".Mform_group").eq(2).find('.Mcontrol_label').text('确认新密码：');
$(".P_info:eq(2)").attr({type:'password', id: 'sure_PWD', name: 'sure_PWD', placeholder:'再次输入密码'});
// $(".Mform_group").eq(2).find('.errorHint').text('请输入6-16位密码，区分大小写，不能使用空格！');
});
}
// 关闭窗口
function close_bind(el) {
$(".right-container").delegate(el, 'click', function() {
$(".modal_blackout").remove() && $(".modal_overlay").remove();
});
}
//表单的数据请求
function Bform_request(obj) {
$(".right-container").delegate(obj, 'click', function(event) {
event.preventDefault();
$.ajax({
url: '/path/to/file',
type: 'post',
dataType: 'json',
data: {old_PWD: $("#old_PWD").val(),
new_PWD: $("#new_PWD").val(),
sure_PWD: $("#sure_PWD").val()},
});
});
}
//表单的表单验证***********这里没有验证反应，要怎么处理呀？？？？
function BForm_Val() {
$("#BPWD_F").validate({
debug:true,
rules:{
old_PWD:{
minlength:6,
maxlength:18,
required:true,
},
new_PWD:{
minlength:6,
maxlength:18,
required:true,
},
sure_PWD:{
minlength:6,
maxlength:18,
required:true,
},
},
errorElement:"div",
});
}
</script>
</head>
<body>
<div class="right-container">
<input type="submit" id="change_PWD" value="修改密码">
</div>
</body>
</html>
未来992回答
-
慕勒0069038
检查下 validate是否选择了 正确的 jquery选择器选择的form 检查下 validate中语法有没有错误， ( 比如 , 变成了 ; 等等）检查下 validate 校验中 需要校验的名称 和 所需验证的input的name 是否匹配 -
WingMeng
这个锅 jQuery 可不背……
随时随地看视频慕课网APP
相关分类
JQuery