Form validation is not working for dynamic dialog content

问题

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 to populate form contents dynamically.

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

Code to populate the above div via ajax.

$.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); 
    }
});

Code to initialize dialog box and validation on DOM load

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

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.

回答1:

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.

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

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

来源：https://stackoverflow.com/questions/23930787/form-validation-is-not-working-for-dynamic-dialog-content