jquery - 通过jquery插入后，基础表单验证不起作用

Question

我可以说以下形式

<form class="callback" data-abide="ajax">
              <div class="row">
                <div class="large-12 columns">              
                     <input type="text" name="clientName" required pattern="[a-zA-Z]+" placeholder="Nom complet">
                     <small class="error">Oublié de mettre votre nom? :)</small>
                </div>
              </div>

            <div class="row">
                <div class="large-12 columns">              
                     <input type="text" name="clientEnterprise" required placeholder="Entreprise">
                     <small class="error">Nous faisons affaire avec les entreprises!</small>
                </div>
            </div>

            <div class="row">
                <div class="large-12 columns">              
                     <input type="text" name="clientPhone" required pattern="[\+][1-9]" placeholder="Téléphone">
                     <small class="error">Le format requis est +199999999</small>
                </div>
             </div>

             <div class="row">
                <div class="large-12 columns">
                     <input type="email" name="clientEmail" placeholder="Email">
                     <small class="error">Une adresse email valide est requise</small>
                </div>
             </div>

            <div class="row">           
                <button  type="submit" class="button expand">Obtenez un rappel dans les 24h</button >
            </div>
            </form>

错误验证可以很好地工作，但是当我通过jQuery附加相同的代码时，验证就会停止工作(使用正确放置表单的jQuery代码，而不是 此处的表单html代码div )我' ve检查了生成的html，一切似乎都就绪。

$(document).on('open', '[data-reveal]', function () {
            var modal = $(this);
            console.log('modal will open');

            modal.append(*****The html code for the form here div*****);
        });

Answer 1

我想我也追溯了此问题的根本原因(＃6407)。自从5.2版本发布以来，我已经遇到了一段时间，并且经历了自5.1.2版本以来对Abide JS的所有更新。
我发现以下更改:(ba8c41f#diff-0fecfcb7f50be59e4f71ef75a2d8be41)
打破模态中的表单输入错误。
我相信这是因为将字段标记为隐藏是因为模态是隐藏的，并且由于新更改不会验证隐藏的输入字段，因此不会 pop 错误。

我还修改了上面发布的Fiddle stavros-zavrakas，以实时刷新率使用live-validate选项。
https://jsbin.com/weyizaniza/edit?html,js，输出

如果单击输入字段，然后单击该字段，或者单击第一个表单中的另一个字段，您将看到错误立即 pop 。处于模式形式时，输入字段不会显示任何错误，因为它们尚未得到验证。

现在尝试在附加5.5.1 JS的情况下进行尝试:
https://jsbin.com/momocecuti/edit?html,js,output