.Net Mvc 3 触发器（提交按钮除外）不显眼的验证

Posted 2023-04-13

【中文标题】.Net Mvc 3 触发器（提交按钮除外）不显眼的验证

【英文标题】：.Net Mvc 3 Trigger (other than submit button) Unobtrusive Validation

【发布时间】：2020-12-20 18:08:53

【问题描述】：

我想要什么

我想用我选择的事件在我的视图中触发客户端验证。它可能是“onblur”，也可能是另一个按钮，但不是提交按钮。

相关链接

How to trigger validation without using a submit button

Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC

我的尝试

给定一个不同的事件监听器，我没有成功地触发了以下方法：

$(selector).validate();

$(selector).valid();

$.validator.unobtrusive.parseDynamicContent(selector);

$.validator.unobtrusive.parse($(selector));

总结

所以我需要客户端验证来触发给定事件（提交时除外）并显示相应的验证消息。我不觉得任何标记/剃刀语法是必要的，因为客户端验证在提交时触发并且所有相应的验证消息都按预期显示。

【问题讨论】：

我也发布了一些有用的东西 [这里][1] [1]：***.com/questions/1479255/…

【参考方案1】：

$('form').valid() 应该可以工作。举个例子吧。

型号：

public class MyViewModel

    [Required]
    public string Foo  get; set; 

控制器：

public class HomeController : Controller

    public ActionResult Index()
    
        return View(new MyViewModel());
    

查看：

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (html.BeginForm())

    @Html.LabelFor(x => x.Foo)
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)


<div id="validate">Hover here to trigger validation</div>

<script type="text/javascript">
    $('#validate').hover(function () 
        $('form').valid();
    );
</script>

【讨论】：

这对我来说是一种享受，尽管当我将 EditorFor 更改为 TextBoxFor 以便给它一个 css 类时，我取得了更大的成功。

【参考方案2】：

手动验证直接注入 HTML 的自定义消息

@using (Html.BeginForm("addBuyOnlinepostA", "BuyOnline", FormMethod.Post, new  @enctype = "multipart/form-data", @id = "form1" ))
  

    @Html.ValidationSummary(true)

    <div class="row">
        <div class="col-sm-10">
            Product Qty
            <input class="inputs" required type="number" id="price" name="price" placeholder="Enter Price in AED"
                data-val="true" data-val-required="Please enter a value" data-val-regex="Please enter a valid number."
                data-val-regex-pattern="\d1,20" />
            <span class="field-validation-valid" data-valmsg-for="price" data-valmsg-replace="true"
                style="color: Red;"></span>
        </div>
    </div>   



    <input type="button" onclick="$('form').valid()" />