Проверка формы основания не работает после вставки через 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 [phone]</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*****);
        });

Answer 1

Я думаю, что я также проследил основную причину этой проблемы (#6407). Я столкнулся с этой проблемой некоторое время, начиная с выпуска 5.2, и прошел все обновления для Abide JS, начиная с 5.1.2. Я обнаружил, что следующее изменение в: ( ba8c41F# diff-0fecfcb7f50be59e4f71ef75a2d8be41) ломает ошибки ввода формы в модальном режиме. Я полагаю, что это потому, что поля помечены как скрытые, потому что модальное скрыто, и так как новое изменение не проверяет скрытые поля ввода, ошибки не появляются.

Я также изменил размещенные выше скриптовые скрипты Fiddle, чтобы использовать опцию live-validate с быстрой частотой обновления. https:// jsbin.com/weyizaniza/edit?html,js,output

Если вы щелкнете по полю ввода, а затем щелкните по нему или по другому в первой форме, вы увидите, что ошибка мгновенно всплывает. Находясь в модальной форме, поля ввода не показывают никаких ошибок, потому что они не проверяются.

Теперь попробуйте это с 5.5.1 JS: https://jsbin.com/momocecuti/edit?html,js,output