.NET Core动态生成的表格表单存在无效值仍提交，如何阻止提交？

1. 原有校验代码语法错误：$(this).hasClass('is-invalid' == true) 写法不符合jQuery API要求，实际执行时会判断元素是否存在名为true的类，完全无法识别is-invalid的校验状态
2. 阻止提交逻辑无效：e.preventDefault() 写在return false之后，代码永远不会执行；且each循环内的return false仅能终止循环遍历，无法阻止按钮的默认提交/表单提交行为
3. 非首行校验规则缺失：代码中i>1时required属性被赋值为空，原生表单校验默认不会对非必填项做拦截，即使输入值不符合max、数字格式等规则也不会阻止提交
4. Select2组件适配问题：自定义的Select2下拉框不会像原生表单元素一样自动添加is-invalid类，校验状态无法被原有逻辑捕获

步骤1：调整视图校验规则（按需选择） #

• 如果要求所有5行全部必填：删除代码中对required变量的条件赋值，所有行的输入项和下拉框统一添加required属性
• 如果要求非首行可空、但填写后必须合法：保留现有required赋值逻辑，通过JS实现动态校验

步骤2：替换原有校验JS代码 #

优先监听表单submit事件（比监听按钮点击覆盖场景更全），使用原生DOM校验API判断输入有效性，适配Select2组件的校验状态：

$('form').on('submit', function(e) {
    let formValid = true;
    // 遍历所有需校验的表单元素
    $('.myClass').each(function() {
        const $element = $(this);
        // 校验原生输入框规则
        if (!this.checkValidity()) {
            formValid = false;
            $element.addClass('is-invalid');
        } else {
            $element.removeClass('is-invalid');
        }
        // 适配Select2下拉框校验
        if ($element.hasClass('js-select2-custom')) {
            const $row = $element.closest('tr');
            // 判断当前行是否有填写内容，有内容则要求下拉框必须选择
            const rowHasValue = $row.find('input[type="number"]').filter(function() {
                return this.value.trim() !== '';
            }).length > 0;
            
            if (rowHasValue && $element.val() === '') {
                formValid = false;
                $element.next('.select2-container').find('.select2-selection').addClass('is-invalid');
            } else {
                $element.next('.select2-container').find('.select2-selection').removeClass('is-invalid');
            }
        }
    });
    // 校验不通过时阻止提交
    if (!formValid) {
        e.preventDefault();
        // 可选：自动滚动到第一个无效输入位置
        $('html, body').animate({
            scrollTop: $('.is-invalid').first().offset().top - 80
        }, 150);
    }
});

补充说明 #

使用原生checkValidity() API会自动识别输入项的max、data-rule-digits、数字格式等规则，无需依赖元素是否存在is-invalid类，校验逻辑更可靠。

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