手动向 mvc 表单添加不显眼的验证答案

【问题标题】：Manually add unobtrusive validation to mvc form手动向 mvc 表单添加不显眼的验证
【发布时间】：2017-03-03 15:34:47
【问题描述】：

此字段可以根据其可见性进行选择性验证。如果该字段是隐藏的，那么我们不想验证它，但如果它没有隐藏，那么我想添加必需的验证。

我现在手动检查它并逐步通过调试器，我可以看到 MS 不显眼的验证库在我更改类属性后正在重置类。

我猜我可以从不显眼的验证库中调用一些内置方法，但似乎无法弄清楚。

型号

[Column(TypeName = "varchar")]
[StringLength(150, ErrorMessage = "Url must be less than 151 characters.")]
public string Url { get; set; }

查看 Javascipt

if ($("#Url").val() === '') {
    $('#Url').addClass('input-validation-error');
    return false;
} else {
    $('#Url').removeClass('input-validation-error');
}

查看表格

<div>
    @Html.TextBoxFor(m => m.Url)
    @Html.ValidationMessageFor(m => m.Url)
</div>

【问题讨论】：

标签： javascript c# jquery asp.net-mvc

【解决方案1】：

为什么不限制输入长度？

@Html.TextBoxFor(m => m.Url, new { maxlength = 150 })

好的，我没有尝试过，但我认为它大致是你想要的

<div>
    @ Html.TextBoxFor(m => m.Url)
    @ If (Model.validateUrl)
      {
         var v = new ValidationMessageFor(m=>m.Url);
         v.GetHtml();
      }
</div>

或者它可能就像

一样简单

<div>
    @ Html.TextBoxFor(m => m.Url)
    @ If (Model.validateUrl)
      {
         @ Html.ValidationMessageFor(m => m.Url)
      }
</div>

我不太记得哪个是合适的，最近在 Angular 上工作了这么多

【讨论】：

长度部分不是问题，如果文本框被隐藏，它无论如何都不会超过最大长度。我需要根据它的可见性使其成为必需。
抱歉，我正在查看长度验证。可见性基于什么？ javascript中的视图模型或其他东西？
模型上的另一个字段
我相信模型需要具有Required 属性才能使ValidationMessages 方法工作。这将迫使它成为任何一种方式。

【解决方案2】：

你不能添加这样的类，它不起作用你必须使用$.validator所以你的代码会是这样的

      <script type="text/javascript">
$("#Submitbutton")
    .click(function() {


        if ($("#Url").val() === '') {
            $.validator.setDefaults({
                ignore: "#Url"
            });

        } else {
            $.validator.setDefaults({
                ignore: null
            });
            return false;

        }
    });

它会检查它的值是否为 null 它将忽略验证，否则它将显示验证错误

【讨论】：

你确定所有的库都正确加载了吗？你能提供整个javascript代码吗？
它们已正确加载，表单其余部分的验证工作正常。 javascript 的其余部分只是上面发布的代码在 OnSubmit 处理程序中运行。
你能检查一下上面的代码是否有任何错误，因为它对我有用
并尝试输入 151 个字符并提交，因为您的验证消息会在您输入 151 个字符时显示
让我知道它是否有效，我对代码进行了一些更改，现在它可以工作了

【解决方案3】：

啊终于找到了！

以下是如何使用内置验证库即时添加验证！

$('#Url').rules('add', {
    required: true
});

【讨论】：