jquery验证不适用于通过ajax提交的动态表单

时间:2017-04-24 12:49:27

标签: javascript jquery ajax jsp spring-mvc

<!--- Edit Popup Start --->
                   <div class="modal fade editpopup" id="edit-pop${subUser.employerId}" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                                  <h4 class="modal-title custom_align" id="Heading">Edit Your User Details</h4>
                              </div>
                              <c:url var="updateSubUserDetails" value="/employer/recruiters/updateSubUserDetails"/>
                              <form id="updateform${subUser.employerId}" action="${updateSubUserDetails}"  method="post" >
                            <div class="modal-body">
                            <input type="hidden" name="subUserId" value="${subUser.employerId}"/>
                              <div class="form-group">
                                  <input type="text" id="subUserName${subUser.employerId}" name="subUserName" class="form-control "  value="${subUser.firstName}" placeholder="Edit Sub User Name"/>
                              </div>
                              <div class="form-group">
                                  <input type="text"  id="subUserEmail${subUser.employerId}" name="subUserEmail" class="form-control "  value="${subUser.emailId}" onchange="checkMail(${subUser.employerId})"    placeholder="Edit Email"/>
                              </div>
                               <span id="avialabilityMessage${subUser.employerId}"></span>  
                              <div class="form-group">
                                  <input type="text" id="subUserMobile${subUser.employerId}" name="subUserMobile" class="form-control "  value="${subUser.mobileNumber}"placeholder="Edit Contact No"/>
                              </div>
                                <sec:csrfInput/>
                            <div class="modal-footer">
                              <input type="submit" id="subUserEditButtonID${subUser.employerId}" class="btn btn-warning btn-lg glyphicon glyphicon-ok-sign" onclick="updateSubUserDetails(${subUser.employerId},event)" value="Update"> 
                            </div>
                            </div>
                        </form>

                        </div>
                      </div>
                   </div>
                   <!-- Edit Popup End --->

这是我的模式,包含用于更新用户详细信息的表单。这些表单是动态表单,我正在尝试对此应用jquery验证,但那些不起作用,请帮助我。

function updateSubUserDetails(id,event) {
          //event.preventDefault();
          $("#updateform"+id).validate({
                rules: {
                    subUserName:{
                        required: true,
                        names: true,
                        maxlength:25
                    },
                    subUserEmail: {
                        required: true,
                        emailid: true,
                        maxlength:255
                    },
                    subUserMobile:{
                        mobile:true,
                    },
                },
                submitHandler: function (form) {
                    var data = $("#updateform"+id).serialize();
                    var action=$("#updateform"+id).attr("action");
                            $.ajax({
                            type : "POST",          
                            url : action,
                            data : data,
                                success: function(response){
                                    $('.formFieldError').remove();
                                                if(response.status == "SUCCESS"){
                                                    $("#edit-pop"+id).hide();
                                                    var satusMessage = "<span style='color:#41a0f4;font-size:12px'><b>SubUser Details are Updated Successfully</b></span>";
                                                    $('#statusMessageSpan').html(satusMessage);
                                                 } if(response.status == "ERROR"){
                                                        for(var key in response.errorsMap){
                                                            var array=response.errorsMap[key];
                                                            for(var i=0;i<array.length;i++)
                                                                {
                                                                 $("<p class=\"formFieldError\"  style='margin:0;color:indianred' id=\""+key+"Id\">"+array[i]+"</p>").insertAfter("#"+(key+id));
                                                                }
                                                        }
                                                    }
                                             }
                                        });

                            getSubUsersAjax();
                     }
            });

      }

以下脚本是ajax脚本

function getSubUsersAjax(){
       var millisecondsToWait = 50;
        setTimeout(function() {
            $.ajax({
                type : "GET",           
                url : "viewSubUsersAjax",
                success: function(data){
                tableReplace(data);
                    }
             });
        }, millisecondsToWait);
 }

0 个答案:

没有答案