.NET MVC 5表单验证消息页面加载即显，如何改为提交后触发？

1. 检查控制器GET方法的逻辑 #

如果你的控制器GET方法里调用了TryValidateModel或者手动往ModelState里添加了错误，会导致页面一加载就显示验证提示。要保证GET方法只负责初始化模型，不做验证：

public ActionResult YourFormAction()
{
    var model = new PersonalInfoModel();
    // 不要在这里执行验证操作
    return View(model);
}

2. 配置客户端验证，仅在提交时触发 #

MVC5默认用jQuery Validate做客户端验证，默认不会在页面加载时自动验证，但如果有自定义配置导致提前触发，可在页面底部（引用完jQuery和验证脚本后）加这段脚本：

$(function() {
    $('form').validate({
        // 关闭输入框失焦、按键时的自动验证
        onfocusout: false,
        onkeyup: false,
        onclick: false,
        // 只有点击提交时才执行验证并提交表单
        submitHandler: function(form) {
            form.submit();
        }
    });
});

3. 完善视图的验证消息元素 #

每个必填字段需要对应添加验证消息标签，同时确保表单被正确包裹：

@using (Html.BeginForm())
{
    <label asp-for="Naam"></label>
    <input asp-for="Naam" />
    <span asp-validation-for="Naam"></span>

    <label asp-for="Voornaam"></label>
    <input asp-for="Voornaam" />
    <span asp-validation-for="Voornaam"></span>

    <label asp-for="Adress"></label>
    <input asp-for="Adress" />
    <span asp-validation-for="Adress"></span>

    <label asp-for="Postcode"></label>
    <input asp-for="Postcode" />
    <span asp-validation-for="Postcode"></span>

    <label asp-for="Gemeente"></label>
    <input asp-for="Gemeente" />
    <span asp-validation-for="Gemeente"></span>

    <label asp-for="Email"></label>
    <input asp-for="Email" />
    <span asp-validation-for="Email"></span>

    <label asp-for="Telefoon"></label>
    <input asp-for="Telefoon" />
    <span asp-validation-for="Telefoon"></span>

    <input type="submit" value="Doorsturen" />
    <div asp-validation-summary="All"></div>
}

4. 确认模型的必填特性设置正确 #

检查你的模型类，确保所有必填字段都添加了[Required]特性：

public class PersonalInfoModel
{
    [Required(ErrorMessage = "Naam is verplicht")]
    public string Naam { get; set; }

    [Required(ErrorMessage = "Voornaam is verplicht")]
    public string Voornaam { get; set; }

    [Required(ErrorMessage = "Adres is verplicht")]
    public string Adress { get; set; }

    [Required(ErrorMessage = "Postcode is verplicht")]
    public string Postcode { get; set; }

    [Required(ErrorMessage = "Gemeente is verplicht")]
    public string Gemeente { get; set; }

    [Required(ErrorMessage = "Email is verplicht")]
    public string Email { get; set; }

    [Required(ErrorMessage = "Telefoon is verplicht")]
    public string Telefoon { get; set; }
}

5. 确保验证脚本正确引用 #

在布局页或当前视图中，必须引用这三个核心脚本：

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

完成以上设置后，验证消息只会在点击提交按钮、表单验证不通过时才显示。

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