如何将ParsleyJS正确绑定到SweetAlert2模态框实现表单验证

核心问题点 #

• 缺失jQuery依赖：ParsleyJS 是基于jQuery开发的插件，你当前的代码未引入jQuery，所有Parsley相关方法都无法正常执行。
• 调用对象错误：你用querySelector获取到的是原生DOM对象，而parsley()是绑定在jQuery对象上的方法，直接调用会报错。
• 未做验证拦截逻辑：就算验证触发成功，你没有判断验证结果，验证失败时也返回了表单数据，SweetAlert2会直接走后续流程不会停止。
• Parsley配置错误：data-parsley-class-handler属性需要传入合法的CSS选择器，绑定class为error-msg的容器需要写.error-msg而非直接写类名。

HTML 代码 #

<!-- 先引入jQuery，必须在Parsley之前引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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',
            // 修正data-parsley-class-handler的选择器写法
            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,
            // 模态框渲染完成后提前初始化Parsley实例
            didRender: () => {
                // 用jQuery包装表单元素后初始化Parsley
                $('#form-checkzip').parsley();
            },
            preConfirm: () => {
                const $form = $('#form-checkzip');
                // 触发表单验证，返回布尔值表示是否通过
                const isValidatePass = $form.parsley().validate();
                // 验证不通过直接返回false，阻止SweetAlert2后续流程
                if (!isValidatePass) {
                    Swal.hideLoading();
                    return false;
                }
                // 验证通过才返回表单数据走后续逻辑
                return {
                    lookup: $('#lookup').val()
                }
            }
        });
    });
});

内容的提问来源于stack exchange，提问作者dentalhero