jQuery AJAX模态框表单提交时validate与submitHandler未触发问题求助

你遇到的提交无响应问题核心原因是表单校验规则初始化时机错误：
页面首次加载执行JS时，你的表单id还是默认的none，此时if ($("#sendStedForm").length > 0)判断结果为假，校验规则和提交处理逻辑完全没有绑定到表单上。后续你是在用户点击触发模态框时才动态修改表单id为sendStedForm，但此时不会重新触发校验规则的绑定，因此点击提交按钮没有任何反应。

1. 调整校验规则初始化时机 #

把表单校验的初始化逻辑，挪到动态修改表单id、加载完表单内容之后执行，也就是放在模态框AJAX请求的success回调里。

2. 修复其他潜在bug #

• 提交成功后追加下拉选项的代码中，sted、oppmote、oppmote_tid三个变量未定义，需要主动从表单输入框取值
• 关闭模态框的ID写错了，你的模态框实际ID是Modal不是stedModal

修改后参考代码 #

function goBack() {
  window.history.back();
}
$('#alert').hide();

// 封装Sted表单校验初始化函数
function initStedFormValidate() {
    $("#sendStedForm").validate({
        rules: {
            sted: {
                required: true,
                maxlength: 100,
            },
            oppmote: {
                required: true,
                maxlength: 100,
            }, 
            oppmote_tid: {
                pattern: /^[0-9,]+$/,
                maxlength: 4,
            }
        },
        messages: {
            sted: {
                required: "<small class=\"text-danger\">Legg inn sted</small>",
                maxlength: "<small class=\"text-danger\">Sted bør ikke være så langt. 100 tegn er maks</small>",
            },
            oppmote: {
                required: "<small class=\"text-danger\">Legg inn en kort beskrivelse</small>",
                maxlength: "Beskrivelsen bær ikke være så lang. Maks 100 tegn</small>",
            },  
            oppmote_tid:  {
                pattern: "<small class=\"text-danger\">Skriv inn ett gyldig nr</small>",
                maxlength: "<small class=\"text-danger\">Oppmøte tid er for langt. Maks 3 tegn</small>",
            },
        },
        submitHandler: function(form) {
            alert('hi');
            $('#submitSted').html('lagrer..');
            $.ajax({
                url: "<?php echo base_url('/vakter/ajaxAddSted/post') ?>",
                type: "POST",
                dataType: "json",
                data: $('#sendStedForm').serialize(),
                success: function( response ) {
                    console.log(response);
                    // 修复：获取表单输入值
                    let sted = $('#ssted').val();
                    let oppmote = $('#soppmote').val();
                    let oppmote_tid = $('#soppmote_tid').val();
                    $('#submitSted').html('Submit');
                    $('#alert').html(response.msg);
                    $('#alert').addClass(response.typemsg);
                    $('#alert').show();
                    $("#sted").append('<option value="'+ response.id +'">'+ sted + ' - ' + oppmote + ' - ' + oppmote_tid + ' timer</option>')
                    // 修复：模态框ID修正
                    $('#Modal').modal('hide'); 
                    $('#submitSted').html('<i class="far fa-trash-alt"></i> Lagre');
                    setTimeout(function(){
                        $('#alert').hide();
                        $('#alert').html('');
                    },10000);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        }
    });
}

$('.stedModal').click(function() {
    var typet = $(this).data('type');
    if (typet == 'type') {
        var url = '/vakter/ajaxAddType';
        $('.modalForm').attr('id', 'sendTypeForm');
        $('.modalForm').attr('name', 'sendTypeForm');
        $('.submitButton').attr('id', 'submitType');
        $('.submitButton').attr('name', 'submitType');
        $('.modal-title').html('Legg til Type');
        // 如果需要Type表单的校验，这里可以对应加初始化逻辑
    } else if (typet == 'sted') {
        var url = '/vakter/ajaxAddSted';
        $('.modalForm').attr('id', 'sendStedForm');
        $('.modalForm').attr('name', 'sendStedForm');
        $('.submitButton').attr('id', 'submitSted');
        $('.submitButton').attr('name', 'submitSted');
        $('.modal-title').html('Legg til Sted');
    }
    // AJAX request
    $.ajax({
        url: url,
        type: 'post',
        success: function(response){ 
            // Add response in Modal body
            $('#alert').hide();
            $('.main').html(response);
            // 表单内容加载完成后，初始化校验规则
            if (typet == 'sted') {
                initStedFormValidate();
            }
            // Display Modal
            $('#Modal').modal('show'); 
        }
    });
});

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