在元素上设置验证样式

时间:2018-01-03 14:34:24

标签: javascript jquery asp.net asp.net-mvc jquery-validate

在我的表单上,我有一个对视图模型强类型的隐藏元素,然后我有一个'虚拟'文本框,用户将在其中输入将复制到隐藏元素值的值。

剃刀

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

我想要&#39;假的&#39;由于实际属性被隐藏,文本框将以红色突出显示?我该如何做到这一点?

此外,这些元素的名称是否真的与模型无关,但是在我的示例中用于这些目的?

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

然后我可以编辑我的问题标题,以代表更好,更丰富的风格。

3 个答案:

答案 0 :(得分:1)

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

<input id="TestPropertyEmpty" required />

瞧。如果这没有用,请告诉我。

答案 1 :(得分:1)

您可以使用Range验证规则,而不是创建代理字段(为了显示空框而不是0.00,以便吸引用户注意它)。原始字段,用于指定在提交表单时字段的值必须大于0。如果用户忽略该字段,他们将收到验证错误。它比你现在想做的更简单,更清洁。

这与您当前的设计相同,因为如果您不希望该字段为空白,则您有效地说(因为0存储在隐藏字段中)您不想要它0,验证将具有相同的效果,因为它确保用户关注该字段。事实上,在您之前的方法中,用户可以再次在框中写入0,这似乎是您不会乐于进入的价值。

答案 2 :(得分:0)

  

属性TestProperty是必需的,它是隐藏的,但我仍然   需要验证

我已经在下面的主题上写了一个答案, HERE 。阅读它,我希望它可以帮到你。

  

在某些情况下,您希望忽略一个或多个验证   客户端中的隐藏字段(并非所有隐藏字段)以及您   想在服务器端中验证它们和其他隐藏字段。