Validate a form dynamically inserted to the DOM

Question

I am working on a project where I need to validate a form dynamically inserted to the DOM. Was wondering how to properly accomplish this?

I tried the following unsuccessfully:

  $(document).on('formValidation', '#myform', {
                fields: {
                    "first_name": {
                        validators: {

Current Validation format:

$('#myForm')
        .formValidation({
            fields: {
                "first_name": {
                    validators: {
                        notEmpty: {
                            message: 'Please enter a first name.'
                        }
                    }
                },

Answer 1

One solution is to use MutationObserver to listen in on nodes dynamically added to the DOM.

When a form with the id myForm is added to the body you will know and can then execute your form validation logic.

For example

// dynamically add the form for testing
setTimeout(function(){
  var elem = document.createElement('form');
  elem.id="myForm";
  elem.innerHTML="Hello I am a dynamically added form";
  document.body.appendChild(elem);
}, 2000);

// select the target node
var target = document.body;

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    mutation.addedNodes.forEach(function(node){
      if(node.id === "myForm"){
        console.log("myForm was just added");
        // do validation logic here
      }
    })
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);