使用ajax打开添加/更新表单时，JQuery中的问题会生效

Question

Problem

JQuery Validate does not work. In the below plunker, Please click on "Please click here" button and then click on save. It will not validate form.

Sample code in Plunker

I have jQuery validation code which is working fine in case I open the add/update form in new page. I meant by redirecting the user to a new route.

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

    },
    messages: {

    },
    submitHandler: function(form) {

    }
});

In case I open the add/update form on clicking the button in same page when I am inside List page...The above jQuery validate code does not work. I am assuming that I will need something like this...

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

But, I am not sure how can I bind the validate event in this way....

Answer 1

Since your form is async, your element is not already on the dom when you are creating the validator.

What you should do is add the validate code on your ajax success function:

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