Question

由于几天我已经开始反对它，尝试了所有的想法（不管是不是），但似乎我无法让它发挥作用。

我试图存档的是：我希望只显示一个带有jquery工具提示的图标，而不是原始的验证消息。此外，解决方案应该易于维护...意味着可以在需要验证的每个View上使用。

到目前为止我尝试了什么：

@Html.ValidationMessageFor(Function(m) m.Password, Nothing, New With {.class = "ValWarn"})

CSS：

.ValWarn {content: url(images/Warning.png);margin: 0.1em;}

结果：image 1

问题：我无法将验证邮件分配给其标题。

测试＃20357

    <div id="divhiddenval" style="display: none;">
        @Html.ValidationMessageFor(Function(m) m.Password)
    </div>
    @Html.PasswordFor(Function(m) m.Password)
    <div id="valdiv_@Html.IdFor(Function(m) m.Password)" style="display: inline;"></div>

使用Javascript：

$(document).ready(function () {
        fullValidation();
        $('form').submit(function () {
            if (! $(this).valid()) {
                fullValidation();
                return false;
            }
        });
            $('input').keydown( function () {
                singleValidation(this.id);
                tooltip();
            });

        });


        function singleValidation(_id) {
            var _err = $("span[data-valmsg-for='" + _id + "']");

            if ($(_err).text() != "") {
                $("#valdiv_" + $(_err).attr("data-valmsg-for")).html("<span class='ValWarn tooltip' title='<span class=&quot;warncolor&quot;>" + $(_err).text() + "</span>'></span>");

            } else {
                $("#valdiv_" + $(_err).attr("data-valmsg-for")).html("");
            }
        }

        function fullValidation() {
            $("#divhiddenval span[data-valmsg-for]").each(function () {
                singleValidation($(this).attr("data-valmsg-for"));
            })
            tooltip();
        }

结果：shows tooltip on hover

问题：每次调用tooltip（）都有点过分。它也不适用于第一个按键。当我移出输入并再次移入键入时，它可以工作。因此，按键一旦失去焦点就不会开火。

接下来尝试：我在网上找到了ValidationHTMLMessageFor Extension。相当接近但到目前为止...... 我的应用程序是全球化的，因此我将被迫在每个资源字符串之前添加图像，因为dataanotations它只需要静态字符串。此外，工具提示问题也无法解决。

所以......我无法想到任何其他可以按照我的意愿工作的方法。另一方面，我无法相信微软让我们自己设置Validationmessages的风格很难:(

如果有人请帮我解决这个问题？

Answer 1

好的，这里的部分问题是ValidateMessageFor返回一个span元素，其中包含您在模型中声明的错误消息。相反，我会尝试使用ValidateFor。 ValidateFor不会返回附加到模型的错误消息，但会发出与其绑定的字段的验证失败的信号，这使得它成为您希望向用户呈现的通知的理想候选者。

确保您在web.config中启用了客户端验证和不显眼的JavaScript，并且视图中包含正确的javascript文件。

的web.config

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

的javascript

~/Scripts/jquery-1.7.1.min.js
~/Scripts/jquery.validate.min.js
~/Scripts/jquery.validate.unobtrusive.min.js

对于您尝试实施但使用 ValidateFor

的类似用法，这是一个不错的参考

我忘了补充一点，我解释的方法会不引人注意地进行验证，而不必“提交”表单。您仍然可以使用ValidateFor提交表单来标记您的验证有错误，然后使用jQuery访问输入验证错误类和data-val-属性的数据，以获得您所需的结果。提示。

带有图像和工具提示的Html.ValidationMessageFor

1 个答案: