表单验证不适用于动态对话框内容。

Question

在我的应用程序中，我使用Jquery对话框创建了一个对话框表单。这个对话框是动态的。也就是说，通过ajax，我正在用一些表单数据填充div。一旦这个div被动态地填充到一个表单中，我就会在对话框中显示这个表单。打开此对话框后，在表单提交之前，我需要使用Jquery ()方法进行一些表单验证。但是表单并不是有效的。

动态填充表单内容的Div。

<div id="popup" style="display:none">
</div>

通过ajax填充上述div的代码。

$.ajax({
    url:'some url path',
    type:'GET',
    data: {x:1,y:2},
    dataType:'html',
    success:function(data){
        $('#popup').html(data);
        $('#popup').dialog('open'); 
    },
    error:function(xhr,textStatus,errorThrown){
        alert(errorThrown); 
    }
});

初始化对话框的代码和DOM负载的验证

$('#ci_entry_form').validate(); 

$("#popup").dialog({ 
    autoOpen: false,
    title : "View/Edit Screen",             
    dialogClass : "pop-content pop-header-colr",
    width:750,
    height:650,
    modal: true,
    resizable: false,
    show: 'clip',
    buttons:{
        'SUBMIT':function(){
            alert("am here");                                           
            $('#ci_entry_form').submit();
        }   
    }
});

请帮我解决这个问题。我是不是错过了什么。一旦表单(‘ci_entry_form’)成功验证，我就需要在对话框中点击按钮调用ajax函数。

任何一个人都对解决这个验证问题有任何想法。

Answer 1

调用表单元素时，$('#ci_entry_form').validate();调用会对其进行适当的绑定。如果您的表单在调用绑定函数时未完成，则它将不适用于稍后添加的表单元素。为了确保验证对所有表单元素都有效，在ajax请求完成并将元素加载到DOM后调用$('#ci_entry_form').validate();函数。

我已经设置了一个小提琴来演示这一点：http://jsfiddle.net/Zd7YT/6/

注意第34行，其中在加载表单后调用called ()函数。