data-val-required验证失败应显示提示吗？如何实现错误提示？

我做了一个模态对话框的CSHTML，里面包含两个输入表单。点击Submit按钮时，input的required属性能正常生效（未填写内容不会触发AJAX请求），但验证失败时完全没有任何提示信息。想请教：data-val-required属性是否应该自动显示提示消息？如果不能，该如何实现错误消息的展示？

对应的HTML代码：

<div id="modal_dialog" style="display: none">
    <form id="myForm">
        <input type="text" name="fullname" id="fullname" required data-val="true" data-val-required="Name is required" />
        <input type="text" name="email" id="email" required data-val="true" data-val-required="email is required" />
        <button type="submit">Submit</button>
    </form>
</div>

JavaScript代码：

<script>
    $(document).ready(function () {
        $("#myForm").validate();
        $("#myForm").submit(function (event) {
            event.preventDefault(); 

            if ($("#myForm").valid()) {
                alert("valid");
                $.ajax({
                    type: "POST",
                    url: "/Index?handler=Send",
                    data: $("#myForm").serialize(),
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                    }
                });
            }
        });

    });
</script>

关于data-val-required的作用 #

data-val-required是ASP.NET MVC无侵入式验证（Unobtrusive Validation）的专用属性，它本身不会自动显示提示——除非你引入了配套的Unobtrusive Validation脚本，并且页面有存放错误消息的容器。你目前只调用了jQuery Validate的基础方法，所以这些data-val-*属性不会被自动识别并渲染提示。

方法1：用jQuery Validate手动配置（不依赖data-val-*） #

直接在validate()方法里定义验证规则和错误消息，同时指定提示的显示位置：

$(document).ready(function () {
    $("#myForm").validate({
        // 定义验证规则
        rules: {
            fullname: { required: true },
            email: { 
                required: true,
                email: true // 可选：添加邮箱格式验证
            }
        },
        // 定义错误提示文本
        messages: {
            fullname: "请输入姓名",
            email: {
                required: "请输入邮箱",
                email: "请输入有效的邮箱地址"
            }
        },
        // 指定错误消息的标签类型
        errorElement: "span",
        // 配置错误消息的插入位置
        errorPlacement: function(error, element) {
            error.insertAfter(element); // 把提示放在输入框后面
        },
        // 可选：给错误提示加样式类
        errorClass: "text-danger"
    });

    $("#myForm").submit(function (event) {
        event.preventDefault(); 

        if ($("#myForm").valid()) {
            alert("验证通过");
            $.ajax({
                type: "POST",
                url: "/Index?handler=Send",
                data: $("#myForm").serialize(),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
                }
            });
        }
    });
});

方法2：启用ASP.NET无侵入式验证（利用现有data-val-*属性） #

如果你想复用已有的data-val-*属性，需要完成以下步骤：

1. 引入必要脚本（顺序不能错）：
   • jQuery
   • jQuery Validate
   • jQuery Validate Unobtrusive
2. 添加错误消息容器：Unobtrusive Validation会自动将提示插入到指定容器中：

<div id="modal_dialog" style="display: none">
    <form id="myForm">
        <div>
            <input type="text" name="fullname" id="fullname" required data-val="true" data-val-required="请输入姓名" />
            <!-- 错误消息容器 -->
            <span asp-validation-for="fullname" class="text-danger"></span>
        </div>
        <div>
            <input type="text" name="email" id="email" required data-val="true" data-val-required="请输入邮箱" />
            <!-- 错误消息容器 -->
            <span asp-validation-for="email" class="text-danger"></span>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

3. 简化JS代码：Unobtrusive会自动绑定验证逻辑，无需手动调用validate()：

$(document).ready(function () {
    $("#myForm").submit(function (event) {
        event.preventDefault(); 

        if ($("#myForm").valid()) {
            alert("验证通过");
            $.ajax({
                type: "POST",
                url: "/Index?handler=Send",
                data: $("#myForm").serialize(),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
                }
            });
        }
    });
});

额外提示 #

• 可以给错误消息添加CSS样式（比如color: red; font-size: 12px;），让提示更醒目
• 若使用无侵入式验证，建议后端模型也添加[Required]特性，保证前后端验证规则一致

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