如何为关联隐藏模型属性的输入框设置验证样式及术语咨询

首先明确你问的术语：你所说的这种"非模型关联、用于代理隐藏模型字段收集输入"的控件，专业上叫做代理输入控件（Proxy Input Control）——它本身不直接绑定模型属性，而是作为隐藏字段的交互入口，负责把用户输入同步到目标模型字段，非常适合你这种需要隐藏模型字段但保留用户输入渠道的场景。

接下来咱们搞定提交表单时，让代理输入框TestPropertyEmpty在TestProperty为空时显示红色高亮的需求，直接上修改后的完整代码和说明：

完整实现代码 #

Razor视图部分 #

@Html.HiddenFor(model => model.TestProperty)
@Html.Editor("TestPropertyEmpty", new { htmlAttributes = new { @class = "form-control", @placeholder = "xxxx.x" } })
<!-- 可选：添加验证消息容器，让用户更清楚错误原因 -->
<span id="TestPropertyEmpty-validation" class="text-danger" style="display: block; margin-top: 0.25rem;"></span>

jQuery脚本部分 #

@section scripts{ 
@Scripts.Render("~/bundles/jqueryval") 
<script>
// 开启jQuery Validation对隐藏元素的验证支持
$.validator.setDefaults({ ignore: [] });

$(document).ready(function() {
    // 初始化清空隐藏字段，避免模型默认值干扰验证
    $("#TestProperty").val('');

    // 代理输入框失去焦点时，同步值到隐藏字段，并触发实时验证
    $("#TestPropertyEmpty").blur(function() {
        $("#TestProperty").val(this.value);
        // 手动触发隐藏字段的验证，实时更新状态
        $("#TestProperty").valid();
    });

    // 重写jQuery Validation的高亮/取消高亮逻辑，关联代理控件
    $("form").validate({
        // 验证失败时的样式处理
        highlight: function(element, errorClass, validClass) {
            // 如果是隐藏的TestProperty验证失败，给代理输入框加错误样式
            if ($(element).attr("id") === "TestProperty") {
                $("#TestPropertyEmpty").addClass(errorClass).removeClass(validClass);
                $("#TestPropertyEmpty-validation").text("此字段为必填项");
            } else {
                // 其他控件保持默认处理
                $(element).addClass(errorClass).removeClass(validClass);
            }
        },
        // 验证通过时的样式处理
        unhighlight: function(element, errorClass, validClass) {
            // 如果是隐藏的TestProperty验证通过，移除代理输入框的错误样式
            if ($(element).attr("id") === "TestProperty") {
                $("#TestPropertyEmpty").removeClass(errorClass).addClass(validClass);
                $("#TestPropertyEmpty-validation").text("");
            } else {
                // 其他控件保持默认处理
                $(element).removeClass(errorClass).addClass(validClass);
            }
        }
    });
});
</script>
}

关键逻辑说明 #

1. 利用Validation的钩子函数：highlight和unhighlight是jQuery Validation内置的回调，分别在验证失败/通过时触发。我们在这里判断触发验证的元素是隐藏的TestProperty时，就把样式变化同步到代理输入框上。
2. 实时验证触发：在代理输入框同步值后调用$("#TestProperty").valid()，这样不用等到提交表单，用户输入后就能立刻看到状态变化，体验更好。
3. 可选的错误提示：添加的<span>容器可以显示明确的错误消息，避免用户不知道为什么输入框变红。

额外优化小技巧 #

• 如果想要实现实时输入同步（而不是仅失去焦点时），可以把blur事件改成input事件：

  $("#TestPropertyEmpty").on("input", function() {
      $("#TestProperty").val(this.value);
      $("#TestProperty").valid();
  });
  

• 可以给代理输入框加个必填视觉提示，比如在占位符前加*，或者用CSS加前置星号，让用户直观知道这是必填项。

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