Me gustaría usar la biblioteca de validación de formularios de ParsleyJS para validar un formulario que estoy construyendo dentro de un modal SweetAlert2 .

Aquí está mi código:

HTML

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.5/dist/sweetalert2.all.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script> <a href="#" class="btn-checkzip">Check Zip Code</a>

JS

 $(function() { const $btnCheckZip = $('.btn-checkzip'); $btnCheckZip.on('click', function() { Swal.fire({ title: 'Check Product X Availability', html: '<p>Enter your zip code below to see if product X is currently available in your area.</p><div class="error-msg"></div><div id="form-msg"></div><form id="form-checkzip" class="form"><input type="text" name="lookup" id="lookup" class="swal2-popup-input" placeholder="Enter Zip Code" value="" data-parsley-class-handler="error-msg" data-parsley-validation-threshold="5" data-parsley-pattern="^[0-9]{5}(?:-[0-9]{4})?$" data-parsley-pattern-message="Please enter a valid zip code." data-parsley-required /></form>', showCloseButton: true, confirmButtonText: 'Check Now', showLoaderOnConfirm: true, preConfirm: () => { const inputLookup = Swal.getPopup().querySelector('#lookup').value; const $formLookup = Swal.getPopup().querySelector('#form-checkzip'); //Trying to Bind/Trigger Parsley Validation Event $formLookup.parsley().validate(); return { lookup: inputLookup } } }); }); });

Notas He intentado vincular Parsley al formulario con "data-parsley-validate" y form.parsley(); enfoques. A mi tampoco me han funcionado.

Mi suposición es que deberá vincularse una vez que el formulario esté disponible en el DOM. Entonces, probé los ganchos didOpen y didRender además de preConfirm. Sin suerte.

Pregunta

Entonces, mi pregunta es, simplemente, ¿cómo puedo hacer que Parsley se vincule al formulario construido por SweetAlert2 para que al hacer clic en el botón "Verificar ahora" se active la validación?