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/[email protected]/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?