JQuery 中的问题在使用 ajax 打开 add/update 表单时验证

Issue in JQuery validate when opening add/update form using ajax

问题

JQuery 验证不起作用。在下面的插件中,请点击 "Please click here" 按钮,然后点击保存。它不会验证表单。

Sample code in Plunker

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

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

    },
    messages: {

    },
    submitHandler: function(form) {

    }
});

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

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

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

由于您的表单是异步的,因此当您创建验证器时,您的元素还没有在 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 :)')
            }
          });
  }