jQuery validate的submitHandler不生效 表单提交无错误提示且空字段不入库

核心问题原因 #

• jQuery Validate 插件初始化时机错误
  你将$("#myForm").validate()的初始化逻辑放在了提交按钮的点击事件回调中，该插件要求在页面加载完成后就完成初始化绑定，点击提交时才初始化会导致第一次点击提交时校验逻辑不会触发，errorHandler根本不会执行，自然不会渲染错误提示。
• 变量作用域污染
  errorHandler函数中定义error = 0时没有加var/let/const关键字，会自动变成全局变量，若页面其他逻辑也使用了同名error变量会导致计数异常，可能出现明明有空字段但error被篡改后等于0的情况。
• 空字段提交无数据写入是逻辑正常表现
  你的代码中只有error == 0即校验全通过时才会执行form.submit()提交表单，空字段会触发error计数大于0，表单根本不会提交到后端，自然不会有数据写入数据库。

修复方案 #

调整后JS代码 #

$(document).ready(function() {
    // 页面加载完成就初始化表单校验，不要放在点击事件里
    $("#myForm").validate({
        submitHandler: function(form) {
            alert("Submitted!");
            var error = errorHandler();
            if (error == 0) {
                form.submit();
            }
        }
    });

    // 可选：用户输入时清空错误提示
    $(".inputname").on("input", function() {
        $(this).next('span').html('');
    });

    function errorHandler() {
        // 加let声明变量，避免全局污染
        let error = 0;
        $(".inputname").each(function() {
            if ($(this).is(':visible')) {
                if ($(this).val().trim() == '') { // 加trim避免空格绕过校验
                    $(this).next('span').html("Please Enter Category Name").css("color", "red");
                    error++;
                }
            }
        })            
        return error;
    }
});

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