Bootstrap表单jQuery验证失效求助：切换按钮后无验证提示

看起来你遇到的核心问题是：把提交按钮从type="submit"改成type="button"后，jQuery Validate的自动验证机制没被触发，手动的字段检查和原生checkValidity()也和Validate的逻辑不兼容，导致验证提示无法正常显示。下面是具体的解决思路和修改后的代码：

问题根源分析 #

1. 原生submit按钮会自动触发jQuery Validate的验证流程，但改成button后，这个自动触发逻辑就失效了
2. 你手动通过字段长度判断和原生checkValidity()来验证，既不全面（Validate的规则可能包含更多逻辑，不只是非空），也不会触发Validate的错误提示样式
3. 模态框事件里的stopPropegation是拼写错误，正确写法是stopPropagation()，导致阻止模态框弹出的逻辑没生效

解决步骤及修改后的代码 #

1. 修正jQuery Validate的样式适配（Bootstrap兼容） #

首先把Validate配置里的.control-group改成Bootstrap标准的.form-group，确保错误提示样式正常显示：

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
    $('#formContratto').validate({
        rules: {
            NumeroAutobus: { required: true },
            Descrizione: { required: true },
            DocContratto: { required: true },
            NumeroAutorizzazione: { required: true },
            DataScadenza: { required: true },
            idAbbonamento: { required: true }
        },
        highlight: function (element) {
            // 替换为Bootstrap的form-group类
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                // 适配Bootstrap的成功样式类
                .closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        // 新增：指定错误提示的标签和样式，适配Bootstrap布局
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
});

2. 修正模态框的触发逻辑：先验证再弹出 #

在模态框的show.bs.modal事件里，调用Validate的valid()方法检查表单有效性，如果无效就阻止模态框弹出，同时Validate会自动显示错误提示：

$('#modalLoginForm').on('show.bs.modal', function (e) {
    var $form = $('#formContratto');
    // 调用Validate的valid()方法触发完整验证流程
    if (!$form.valid()) {
        // 修正拼写错误：stopPropagation
        e.stopPropagation();
        // 阻止模态框弹出
        e.preventDefault();
    }
});

3. 修正submitform函数：用Validate的验证结果提交 #

移除原生的checkValidity()，改用Validate的valid()方法判断是否提交表单：

function submitform() {
    var $form = $('#formContratto');
    // 再次验证确保表单完全有效
    if ($form.valid()) {
        $form.submit();
    }
}

4. 按钮代码保持不变（无需手动字段检查） #

<div class="col-sm-2">
    <input type="button" 
           value="@Risorse.Language.InserisciAutorizzazione" 
           class="btnRegister btn btn-default" 
           data-toggle="modal" 
           data-target="#modalLoginForm" 
           onclick="submitform();" />
</div>

为什么这样修改能生效？ #

• $form.valid()会主动触发jQuery Validate的完整验证流程，包括显示错误提示、更新表单样式
• 模态框弹出前先验证，无效就阻止弹出，确保只有表单合法时才会显示确认模态框
• 适配Bootstrap的表单样式类，让错误提示和原生Bootstrap风格统一

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