我用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>
2 回答
已采納
慕勒0069038
TA貢獻143條經驗 獲得超39個贊
檢查下?validate是否選擇了 正確的 jquery選擇器選擇的form?
檢查下?validate中語法有沒有錯誤， ( 比如 , 變成了 ;? 等等）
檢查下?validate 校驗中 需要校驗的名稱 和 所需驗證的input的name 是否匹配?
-
未來99全都檢查過了，都沒有問題。用相同的HTML結構試了一下，就可以。 -
慕勒0069038哦 我懂了 你是說你動態生成了一個表單 ，然后用validate校驗， 那么 可以告訴你 ， validate 的綁定事件是屬于綁定到節點的，而且是已有節點的， 具體你可以看下 jQuery的bind和on 之類的區別 ， 你可以 先生成表單，然后再把validate校驗加在后面執行。 類似于 $(document).ready(function(){ })
-
慕勒0069038$(document).ready(function(){ (function(){ xxxxx(創建了表單); xxxxxx(對表單進行validate校驗); })(); })
點擊展開后面5條
- 2 回答
- 0 關注
- 1125 瀏覽
添加回答
舉報
0/150
提交
取消