Question

I am using jquery validate plugin to validate dynamically loaded form. For some cases I’m loading the content using $.post and in the callback I call a function that adds the validation rules. That works. For some content, I am using $.get and in that callback I am also calling a function that adds the validation rules. However, when using $.get the form is not validated at all.

What is my problem? Is there really any kind of difference using post and get in this perspective?

I think this is the significant code but I did add a lot of code after this in case it’s needed. This is where I call the function that adds the validation rules:

  $.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, function(data){ 
                    //Now, add the validation rules: 
                    addUpdateAgentValidation();

                    $('#dialog-modal').dialog( "option", "title", 'Uppdatera agent');
                    $("#dialog-modal").html(data).dialog("open");

This is the code loading the form:

$("#agents td").live('click',function(event)  
       { 
           //alert("Agents");
           event.preventDefault(); 

            var col = $(this).parent().children().index($(this));

            var $td= $(this).closest('tr').children('td');  
            var $agentid=$td.eq(2).text();  
            var $name=$td.eq(3).text();  

            if(col==0){

                $.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, function(data){ 
                    //alert("GETDONE");
                //Now, add the validation rules: 
                addUpdateAgentValidation();

                $('#dialog-modal').dialog( "option", "title", 'Uppdatera agent');
                $("#dialog-modal").html(data).dialog("open");


                });
                //and the rest of the code
                //.
                //.

Here is the function for adding the validation rules:

function addUpdateAgentValidation(){
        //alert("GETDONE 2");
                  $("#updateagentform").validate({ 
                            errorContainer: "#updateagentmessagebox",
                            errorLabelContainer: "#updateagentmessagebox ul",
                            wrapper: "li", debug:true,


                            rules: { 


                              email1: {// compound rule 
                               // required: true, 
                                email: true 


                              }, 
                              email2: {
                                  //  required: true, 
                                    equalTo: "#email1"
                              },
                              username: {
                                //  required: true,
                                  remote: "http://localhost/SMICAdmin/smicsoap/soap_is_agentusername_available.php"

                              },
                              password: {
                              //    required: true                                 
                              },

                              password2: {
                                  //required: true,
                                  equalTo: "#password1"
                              }
                            }, 
                            messages: { 

                              email1: {// compound rule 
                                email: "Korrekt emailadress saknas"

                              }, 
                              email2: {
                                    equalTo: "Mailadresserna matchar inte varandra"
                              },
                              //username: "Anv‰ndarnamnet mÂste vara unikt"
                              username: {
                                  remote: "Användarnamn finns redan"
                              },


                              password2: {
                                  equalTo: "Lösenord inte lika"
                              }
                            }
                          }); 
                    };

And this is where where I post the form:

$("#updateagentform").live("submit", function(e){
                //Prevent the form from submitting normally

            // alert("Trying to submit user update");

             e.preventDefault();

            $.post("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php",$(this).serialize(),function(msg){
                //alert the response from the server
                //alert(msg);
                $("#dialog-modal").dialog("close");

             });
             $("#usertable").empty();
             $('#usertable').load("http://localhost/SMICAdmin/adminactivities/admin_load_agents.php"); 
             $("#modalarea").empty();
             $('#modalarea').css("visibility","hidden");
       });

And the code generating the form:

echo "<div class='errormessage' id='updateagentmessagebox'> 
                <ul></ul> 
            </div> 
            <form id='updateagentform' method='post'> 
                Ändra önskade fält<br/>
                * Förnamn: <input type='text' name='firstname' /> <br/>
                * Efternamn: <input type='text' name='surname' /> <br/>
                * Email: <input id='email1' type='text' name='email1' /> <br/>
                * Repetera email: <input id='email2' type='text' name='email2' /> <br/>

                * Användarnamn: <input id='username_ID' type='text' name='username' /><br/>
                * Lösenord: <input id='password1' type='text' name='password' /><br/>
                * Repetera lösenord: <input id='password2' type='text' name='password2' /><br/>";
       foreach ($roles as $key=>$role) {
           if(in_array($key, $role_ids)){
               echo "<input type='checkbox' name='rid".$key."' value='rid".$key."' checked />".$role."<br/>";
           }else{
               echo "<input type='checkbox' name='rid".$key."' value='rid".$key."' />".$role."<br/>";
           }

       }

       echo "<input id='submitupdateagentform' type='submit' value='Uppdatera agent' /></form>";

What is my problem and how do I fix it?

Answer 1

You’re calling .validate() on a form that doesn’t exist on the page yet.

  $.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, 
    function(data){ 
        // form does not exist in DOM here
        addUpdateAgentValidation();

        $('#dialog-modal').dialog( "option", "title", 'Uppdatera agent');
        // form exists after this line.
        $("#dialog-modal").html(data).dialog("open");
    });

You need to rearrange your function call so that .validate() gets called after the form gets appended to the DOM:

  $.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, 
    function(data){ 
        $('#dialog-modal').dialog( "option", "title", 'Uppdatera agent');

        $("#dialog-modal").html(data).dialog("open");
        addUpdateAgentValidation();
    });