Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

413
Vistas
How do I properly bind ParsleyJS to a SweetAlert2 Modal?

I would like to use the ParsleyJS Form Validation Library to validate a form that I'm constructing within a SweetAlert2 modal.

Here's my code:

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

Notes I have tried binding Parsley to the form with both the "data-parsley-validate" and form.parsley(); approaches. Neither have worked for me.

My assumption is that it will need to be bound once the form is available in the DOM. So, I've tried the didOpen and didRender hooks in addition to preConfirm. No luck.

Question

So, my question is, simply, how can I get Parsley to bind to the form that's constructed by SweetAlert2 so that clicking the "Check Now" button will trigger validation?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda