javascript - 在元素上设置验证样式

Question

在我的表单上，我有一个隐藏元素，它是 View 模型的强类型，然后我有一个“虚拟”文本框，用户将在其中输入将被复制到隐藏元素值的值。

Razor

@Html.HiddenFor(model => model.TestProperty)
@Html.Editor("TestPropertyEmpty", new { htmlAttributes = new { @class = "form-control", @placeholder = "xxxx.x" } })

jQuery

@section scripts{
    @Scripts.Render("~/bundles/jqueryval")

    <script>

        //enable jQuery validation on hidden elements
        $.validator.setDefaults({
            ignore: []
        });


        $(document).ready(function() {

            $("#TestProperty").val(''); // clear value for validation purposes

            /* Created a 'dummy' textbox so that it will be empty on page load instead of using jQuery to clear the actual strongly-typed property
                because you can see the textbox being cleared on page load.  So once user enters value into dummy textbox then that value will be 
                the value for the actual model property that is hidden
            */
            $("#TestPropertyEmpty").blur(function() {
                $("#TestProperty").val(this.value);
                console.log($("#TestProperty").val());
            });

        });
    </script>
}

目标

属性 TestProperty 是必需的并且它是隐藏的，但我仍然需要对其进行验证，因此 $(document).ready... 上面的代码片段... 启用对隐藏元素的验证。

但我的目标是当 TestProperty 为空并且用户尝试提交时..

我希望“虚拟”文本框以红色突出显示，因为实际属性已隐藏？我该如何实现？

另外，是否有这样的元素的名称，这些元素实际上与模型无关但用于我的示例中的这些目的？

我不喜欢“虚拟元素”这个词。

然后我可以编辑我的问题标题以呈现更好、信息量更大的风格。

Answer 1

而不是创建代理字段(为了显示一个空框而不是 0.00，以引起用户的注意)，您可以在原始字段上使用 Range 验证规则field 指定提交表单时该字段的值必须大于0。如果用户忽略该字段，他们将收到验证错误。它肯定比您现在尝试做的更简单、更干净。

这与您当前的设计等效，因为如果您不希望该字段为空，您实际上是在说(因为 0 存储在隐藏字段中)您不希望它为 0，并且验证将具有相同的效果，因为它确保用户注意该字段。事实上，在您之前的方法中，用户可能会再次在框中写入 0，这似乎是您不希望他们输入的值。