在元素上设置验证样式

Question

在我的表单上，我有一个 strongly-typed 到视图模型的隐藏元素，然后我有一个 'dummy' 文本框，用户将在其中输入将被复制到隐藏元素的值值。

剃刀

@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 为空并且用户尝试提交时..

我希望 'dummy' 文本框以红色突出显示，因为实际的属性被隐藏了？我该如何实现？

此外，是否有真正与模型无关但用于此类目的（如我的示例）的元素的名称？

我不喜欢这个词'dummy-element'。

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

Answer 1

您可以将所需的属性添加到输入中

<input id="TestPropertyEmpty" required />

瞧。如果这没有帮助，请告诉我。

Answer 2

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

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

Answer 3

The property TestProperty is required and it is hidden, but I still need validation on it

我已经在下面写了一个关于这个问题的答案，HERE。看完了，希望对你有帮助。

In some cases you want just ignore validation on one or several hidden fields (not all hidden field) in client-side and also you want validate them and other hidden fields in server-side.

在元素上设置验证样式

Set Validation Styling on Element

javascript

asp.net

asp.net-mvc

jquery

jquery-validate