使用 ajax 打开添加/更新表单时 JQuery 中的问题验证答案

【问题标题】：Issue in JQuery validate when opening add/update form using ajax使用 ajax 打开添加/更新表单时 JQuery 中的问题验证
【发布时间】：2017-06-18 01:46:31
【问题描述】：

问题

JQuery 验证不起作用。在下面的 plunker 中，请单击“请单击此处”按钮，然后单击保存。它不会验证表单。

Sample code in Plunker

我有 jQuery 验证代码，如果我在新页面中打开添加/更新表单，它可以正常工作。我的意思是将用户重定向到新路线。

$("form#" + createRoleForm).validate({
    rules: {

    },
    messages: {

    },
    submitHandler: function(form) {

    }
});

如果我在列表页面中单击同一页面中的按钮打开添加/更新表单...上面的 jQuery 验证代码不起作用。我假设我需要这样的东西......

$(document).ready(function() {
    $(document).on("eventtype", "object", function() {
    });
});

但是，我不确定如何以这种方式绑定验证事件....

【问题讨论】：

标签： php jquery jquery-validate

【解决方案1】：

由于您的表单是异步的，当您创建验证器时，您的元素还没有在 dom 上。

你应该做的是在你的 ajax 成功函数上添加验证代码：

//...
success: function(result) {
        $('#SaveRoleModal').html(result);
        createValidator("form#" + createRoleForm)
        return false;
      },
//...


function createValidator(target) {
    $(target).validate({
            rules: {
              Role: {
                required: true
              }
            },
            messages: {
              Role: {
                required: "Please enter Role"
              }
            },
            submitHandler: function(form) {
              console.log('ok :)')
            }
          });
  }

【讨论】：