Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

408
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda