Question

我使用jquery validate插件来验证动态加载的表单。在某些情况下，我使用$ .post加载内容，在回调中我调用了一个添加验证规则的函数。这样可行。对于某些内容，我使用$ .get并且在该回调中我也调用了一个添加验证规则的函数。但是，使用$ .get时，表单根本不会被验证。

我的问题是什么？使用post并从这个角度来看是否有任何差异？

我认为这是重要的代码，但在此之后我确实添加了很多代码以防万一。这是我调用添加验证规则的函数的地方：

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

这是加载表单的代码：

$("#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
                //.
                //.

以下是添加验证规则的功能：

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

这是我发布表单的地方：

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

生成表单的代码：

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>";

我的问题是什么？如何解决？

Answer 1

您正在页面上尚不存在的表单上调用.validate()。

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

您需要重新排列函数调用，以便在将表单附加到DOM后<{1}}调用

：

.validate()

在.post中附加jquery验证但不在.get中

1 个答案: