表单验证不适用于动态对话框内容 [英] Form validation is not working for dynamic dialog content

问题描述

在我的应用程序中，我正在使用Jquery UI对话框创建对话框表单.这种对话形式是动态的.通过ajax，我用一些表单数据填充了一个div.一旦该div用表单动态填充，那么我将在对话框中显示此表单.打开此对话框后，我需要在提交表单之前使用Jquery validate()方法执行一些表单验证.但是该表格无法验证.

In my application I am creating a dialog form using Jquery UI dialog. And this dialog form is dynamic. That is through ajax I am filling a div with some form data. Once this div is populated dynamically with a form then I am showing this form in a dialog box. Once this dialog box get opened then I need to do some form validation using Jquery validate() method before form is getting submitted. But the form is not validating.

<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函数.

Please help me to solve this. Am I missing some thing. Once the form('ci_entry_form') validated successfully then I need to call an ajax function on button click from dialog box.

任何人都有解决此验证问题的想法.

Any one have any idea to solve this validation issue.

推荐答案

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

The $('#ci_entry_form').validate(); call makes the appropriate bindings on your form elements when you call it. If your form is not complete when you call the binding function, it will not work for form elements which are added later. To make sure that the validation works on all your form elements, call the $('#ci_entry_form').validate(); function after your ajax request finishes and the elements are loaded in the DOM.

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

I've set up a jsfiddle to demonstrate this: http://jsfiddle.net/Zd7YT/6/

请注意第34行，在加载表单后将调用validate()函数.

Note line 34 where the validate() function is called after loading the form.

这篇关于表单验证不适用于动态对话框内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！