Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

407
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!