Bootstrap模态框中jQuery Unobtrusive表单验证异常问题咨询

可能的原因 #

• 页面首次加载生成的验证规则未清除，模态框重新渲染后旧规则仍生效
• jQuery Unobtrusive对IFormFile类型默认添加了隐含必填验证（即便模型未标记[Required]）
• 手动移除验证规则的方式不正确，未同步更新验证元数据

具体解决步骤 #

1. 同步模型与视图的验证属性 #

检查视图中文件输入字段的HTML，确保没有手动添加data-val-required属性。强类型视图生成的代码应类似：

<input asp-for="Picture" type="file" class="form-control" />
<span asp-validation-for="Picture" class="text-danger"></span>

2. 模态框显示时重置验证规则 #

每次打开模态框时，销毁旧验证实例并重新初始化，避免规则缓存：

$('#yourModalId').on('show.bs.modal', function () {
    const form = $(this).find('form');
    // 清除旧验证数据
    form.removeData('validator').removeData('unobtrusiveValidation');
    // 重新解析验证规则
    $.validator.unobtrusive.parse(form);
});

3. 直接移除字段的必填验证规则 #

针对Picture字段修改验证配置：

const formValidator = $('#yourFormId').validate();
// 移除必填规则
formValidator.settings.rules.Picture.required = false;
// 删除对应的错误提示文本
delete formValidator.settings.messages.Picture.required;

4. 检查自定义验证特性的逻辑 #

确认[MaxFileUploadSize]特性没有强制验证文件必须存在，修改特性实现：

public class MaxFileUploadSizeAttribute : ValidationAttribute
{
    private readonly int _maxSize;

    public MaxFileUploadSizeAttribute(int maxSize)
    {
        _maxSize = maxSize;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var file = value as IFormFile;
        // 仅当文件存在时验证大小
        if (file != null && file.Length > _maxSize)
        {
            return new ValidationResult(ErrorMessage);
        }
        return ValidationResult.Success;
    }
}

5. 提交表单时临时忽略字段验证 #

若以上方法无效，提交时临时跳过该字段的验证：

$('#yourFormId').submit(function(e) {
    const validator = $(this).validate();
    // 忽略Picture字段的验证
    validator.settings.ignore = "#Picture";
    
    if (!validator.form()) {
        e.preventDefault();
        // 验证失败后恢复默认忽略规则
        validator.settings.ignore = "";
    }
});

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