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

Question

>问题

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

Plunker 中的示例代码

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

$("form#" + createRoleForm).validate({
    rules: {
    },
    messages: {
    },
    submitHandler: function(form) {
    }
});

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

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

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

Answer 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 :)')
            }
          });
  }