ASP.NET MVC4 - 设置值后不清除隐藏字段验证

时间:2014-02-27 15:30:31

标签: jquery asp.net-mvc-4 jquery-validate jquery-ui-autocomplete asp.net-mvc-validation

我的表单上有一个隐藏字段是必需的。当用户使用jQuery UI自动完成从文本框中选择值时,将填充隐藏字段。我已经设置了我的表单验证器,不会忽略隐藏的字段,以便验证实际上有效。验证确实有效,但是当用户从自动填充中选择所需选项(然后填充隐藏字段)时,验证消息将不会清除,并且将在表单发布之前显示。我是否需要在隐藏字段设置后手动调用$('form').validate()或其他内容,或者有没有办法在没有任何额外的JavaScript代码的情况下清除此内容?

我的视图模型:

public class IndexViewModel
{
    public string SchoolName { get; set; }
    [Required]
    public int SchoolId { get; set; }
}

我的观点:

@model IndexViewModel

@using (Html.BeginForm())
{
    <p>
        @Html.LabelFor(m => m.SchoolName)
        @Html.TextBoxFor(m => m.SchoolName)
        @Html.HiddenFor(m => m.SchoolId)
        @Html.ValidationMessageFor(m => m.SchoolId)
    </p>

    <p>
        <input type="submit" />
    </p>
}

@section scripts {
    <script>
        $(function () {
            // stop validator from ignoring hidden fields
            var validator = $('form').data('validator');
            validator.settings.ignore = "";

            // schoolname autocomplete
            $('#SchoolName').autocomplete({
                minLength: 1,
                source: [
                    { label: "ABC University", value: "1" },
                    { label: "Oklahoma University", value: "2" },
                    { label: "Texas University", value: "3" }
                ],
                select: function (e, ui) {
                    e.preventDefault();
                    $('#SchoolId').val(ui.item.value);
                    $('#SchoolName').val(ui.item.label);
                }
            });
        });
    </script>
}

提前致谢。


修改

Sparky,这是呈现的HTML:

<form action="/" method="post">
    <p>
        <label for="SchoolName">SchoolName</label>
        <input id="SchoolName" name="SchoolName" type="text" value="" />
        <input data-val="true" data-val-number="The field SchoolId must be a number." data-val-required="The SchoolId field is required." id="SchoolId" name="SchoolId" type="hidden" value="" />
        <span class="field-validation-valid" data-valmsg-for="SchoolId" data-valmsg-replace="true"></span>
    </p>
    <p>
        <input type="submit" />
    </p>
</form>

1 个答案:

答案 0 :(得分:1)

错误消息仍然存在的原因是因为隐藏字段上没有正常的验证触发器。通常,对于单个字段,在键入或模糊时触发验证。该字段是隐藏的,因此只有提交按钮才会在验证整个表单时触发隐藏字段的验证测试。

但是,您可以随时通过调用.valid()方法以编程方式触发任何字段的验证测试。

$('input[name="field"]').valid();  // force validation of 'input name="field"'

这是一个粗略的jsFiddle演示:http://jsfiddle.net/LJzfu/

  • 点击“提交”以显示名为field2的隐藏输入上的“必填”消息,该消息没有任何价值。

  • 单击“go”按钮以编程方式将值放入隐藏输入中。该表单现在在技术上通过验证(提交时)但错误消息仍然存在,因为我们没有验证触发器。

  • 在隐藏字段中输入值后立即调用.valid()来触发验证。这会强制对隐藏字段进行验证测试,然后隐藏错误消息(只要满足验证规则)。