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

Question

在我的应用程序中，我正在使用Jquery UI对话框创建一个对话框表单。这个对话框形式是动态的。那是通过ajax我用一些表单数据填充div。一旦使用表单动态填充此div，我将在对话框中显示此表单。一旦打开此对话框，我需要在提交表单之前使用Jquery validate（）方法进行一些表单验证。但表格没有验证。

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

请帮我解决这个问题。我错过了一些东西。表格（＆＃39; ci_entry_form＆＃39;）成功验证后，我需要在对话框中点击按钮时调用ajax函数。

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

Answer 1

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

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

注意第34行，其中在加载表单后调用validate（）函数。