2

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

4

3 回答 3

3

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

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

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

input:valid { border-color:green; }
于 2013-04-03T12:24:29.830 回答
1

样式化有效元素

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

验证模糊

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

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

我在这里回答了同样的问题

于 2013-04-03T12:05:32.937 回答
0

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

$(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 没有，因为它将所有字段的边框设置为绿色，甚至是无效的字段。

于 2013-04-03T22:56:20.343 回答