ValidationEngine doesn't work for a form dynamically created

Question

After create a form on the fly the validationEngine doesn't work anymore

      $(window).load(function($) {

        var form = document.createElement('form');
        form.setAttribute('id', 'xform');

        var lbl_usr = document.createElement('label');

        var input_usr = document.createElement('input');
        input_usr.setAttribute('id', 'user');
        input_usr.setAttribute('name', 'user');
        input_usr.setAttribute('class', 'user-txt');

        var submit = document.createElement('input');
        submit.setAttribute('type', 'submit');
        submit.setAttribute("value", "login");
        submit.setAttribute('id', 'login');

        form.appendChild(lbl_usr);
        form.appendChild(input_usr);
        form.appendChild(submit);

        var divLog = document.getElementById('log');
        divLog.appendChild(form);

       });

And I have configured the ValidationEngine as showed bellow:

    // I have tried attach to the form the validationEngine
    // on document ready, load and without both but it doesn't working            
    $("#xform").validationEngine('attach',{
          onValidationComplete: function(form, status){
             $("#xform").bind('submit', function(e) {
                e.preventDefault();
             });
        },
        maxErrorsPerField: 1,
        custom_error_messages : {
            // Custom Error Messages for Validation Types
            '.user-txt': {
               'minSize': {
                 'message': "less than required."
               },
               'required': {
                 'message': "required"
               }
            }
        }
     });

     $(document).on('click', '#login', function (e) {
        $('#xform').validationEngine('validate');
     });

     // I have tried this but without success for a dynamically form
     // created, for a static form this works fine
     $('#login').click(function() {
          $('#xform').validationEngine('validate');
     });

  });

I don't know why this doesn't work and what is going wrong with this code...

Some help would be great

Thanks

Answer 1

The problem is with your code anything but the validator. On what condition your form is validated? Just add this line (posabsolute's jquery validation engine capable of reading options from HTML5 data attributes):

input_usr.setAttribute('data-validation-engine', 'validate[required]');

Here list of validators you can use between square brackets in above line.