ValidationEngine 不适用于动态创建的表单答案

【问题标题】：ValidationEngine doesn't work for a form dynamically createdValidationEngine 不适用于动态创建的表单
【发布时间】：2014-02-05 19:42:26
【问题描述】：

动态创建表单后，validationEngine 不再工作

      $(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);

       });

我已经配置了 ValidationEngine，如下所示：

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

  });

我不知道为什么这不起作用以及这段代码出了什么问题......

一些帮助会很棒

谢谢

【问题讨论】：

在执行所谓的附加验证引擎时，$('#xform') 是空对象。因为它还没有被创建。控制台是否显示任何错误说明该事实？
不，控制台没有显示任何关于它的错误。但是使用 $(document).on('click', '#login' 预计 #login submit btn 将在稍后收到该事件并且当表单在 DOM 中可用时，对吗？

标签： javascript jquery html validation jquery-validation-engine

【解决方案1】：

问题在于您的代码，但验证器除外。您的表格在什么条件下得到验证？只需添加这一行（posabsolute 的 jquery 验证引擎能够从 HTML5 数据属性中读取选项）：

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

Here 验证器列表，您可以在上面一行的方括号之间使用。

【讨论】：