如何在 ASP.NET MVC 中为有效字段设置绿色边框

Posted 2023-05-09

【中文标题】如何在 ASP.NET MVC 中为有效字段设置绿色边框

【英文标题】：How to put green border for valid fields in ASP.NET MVC

【发布时间】：2013-03-25 00:06:44

【问题描述】：

我找不到任何简单的方法来为在 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 有关。

【问题讨论】：

On submit 等待服务器验证并返回响应，立即执行意味着在 jquery 中验证或向服务器验证函数发送 ajax 请求。无论哪种方式，除了我刚才所说的之外，没有人可以在没有看到实际代码的情况下告诉你。

尝试添加 input:valid border-color:green; 到你的 CSS

【参考方案1】：

至于客户端验证，将此代码添加到您的web.config

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

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

input:valid  border-color:green; 

【讨论】：

我有所有的 web.config 设置，并添加了所有不显眼的 jquery 库。

input:valid 或 input.valid?在我看来，如果您想涵盖非 HTML5 浏览器，则两者都需要（jQuery validate 提供了 .valid 类）。

【参考方案2】：

样式有效元素

我的方法是将元素的默认样式设置为有效（绿色边框）。然后使用验证样式类（例如 input-validation-error）在输入项无效时覆盖默认样式。

模糊验证

为此，您需要更改验证设置。可以这样做。

var validator = form.data("validator");
    if (validator)
        validator.settings.onkeyup = false; // Disable keyup validation
        validator.settings.onfocusout = function (element)                    
            $(element).valid();                   
        ;
    

关于here，我回答了同样的问题

【讨论】：

查看我的编辑。另外，我不想让所有边框默认为绿色。

【参考方案3】：

我发现了我的问题。我在局部视图中加载局部视图。所以内容是动态加载的。在模糊验证中添加此修复：

$(function () 
        $.validator.unobtrusive.parse(document);
        $("input[data-val=true]").on("blur", function () 
            $(this).valid();
        );
);

还有

input.valid 

    border: 1px solid rgb(19, 147, 7);

有效，但 input:valid 没有，因为它将所有字段的边框设置为绿色，甚至是无效字段。