jquery - 如何在 ASP.NET MVC 中为有效字段添加绿色边框

Question

我找不到任何简单的方法可以使 ASP.NET MVC 中有效的字段的边框变为绿色。我正在使用 DataAnnotations 和 Unobtrusive jquery 验证。我拥有所有默认的验证样式，并且可以轻松更改无效控件的边框颜色和消息的颜色。但是，没有将样式添加到有效字段中。我该怎么做。我需要用 jquery 劫持它吗？

我的另一个问题是如何在不编写大量自定义代码的情况下触发模糊字段的验证？默认情况下，它仅在表单提交时验证。我必须使用远程验证吗？我希望有一个简单的设置可以启用它。

编辑

   <% using (Ajax.BeginForm("SaveSupplier",
                             "Suppiers",
                             new AjaxOptions
                             {
                                 UpdateTargetId = "supplier-details-wrapper",
                                 InsertionMode = InsertionMode.Replace
                             },
                             new { id = "supplier-details-form", enctype = "multipart/form-data" }))
    { %>

        <div id="supplier-details">
            <p>
                <%: Model.PageDescription %>
            </p>

            <%: Html.AntiForgeryToken() %>

            -- MY FIELDS HERE --

        </div>

    <% } %>

    <div class="form-buttons">
        <button id="save-button" type="button" class="submit-button">Save</button>
        <button id="cancel-button" type="button" class="submit-button">Cancel</button>
    </div>

和 JavaScript

<script type="text/javascript">
    $(function () {

        $("#save-button").click(function () {
            $("#supplier-details-form").submit();
        });

        $('input[data-val=true]').on('blur', function () {
            $(this).valid();
        });
    });
</script>

我也有

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>">  </script>

在 web.config 中

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

我的问题是，无论我做什么，它都只在服务器端进行验证。如何在 javascript 中手动触发它。我尝试了各种方法，它总是回发到服务器。 $("#my-element-id").valid() 有点有效，它返回 1 或 0，但它不会突出显示文本框，也不会显示错误。验证似乎没有做任何事情。我怀疑这与我的按钮在 Ajax 表单之外或由于 AntiFormgeryToken 有关。

Answer 1

至于客户端验证，请在 web.config 中添加此代码

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

对于边框颜色，尝试将其放入您的 css 中:

input:valid { border-color:green; }