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

【问题标题】：Foundation form validation not working after inserting through jquery通过 jquery 插入后，基础表单验证不起作用
【发布时间】：2014-05-20 04:04:49
【问题描述】：

让我们说下面的表格

<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) 我检查了生成的 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*****);
        });

【问题讨论】：

验证码在哪里？
使用 type + data-abide 应该可以解决问题，请查看foundation.zurb.com/docs/components/abide.html
尝试添加 $('.validate').attr('data-abide', '');在 $(document).foundation() 之前；这应该可以解决问题
我已经这样做了，但它并没有解决问题，因为它没有在输入下调用错误类......

标签： jquery error-handling zurb-foundation

【解决方案1】：

我想我也追踪了这个问题的根本原因 (#6407)。自 5.2 版本以来，我一直遇到这个问题一段时间，并且我经历了自 5.1.2 以来对 Abide JS 的所有更新。我发现以下变化：（ba8c41f#diff-0fecfcb7f50be59e4f71ef75a2d8be41）打破模式中的表单输入错误。我相信这是因为字段被标记为隐藏，因为模式是隐藏的，并且由于新的更改不会验证隐藏的输入字段，因此不会弹出错误。

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

如果您单击一个输入字段，然后单击它，或者在第一个表单中单击另一个，您将看到错误立即弹出。在模态表单中，输入字段不会显示任何错误，因为它们没有经过验证。

现在用 5.5.1 JS 试试这个： https://jsbin.com/momocecuti/edit?html,js,output

【讨论】：