当 jQuery 不显眼的验证发生时隐藏内容

发布于 2025-01-05 00:28:33 字数 1030 浏览 0 评论 0原文

我正在编写一个 MVC3 站点,并且正在使用 JQuery 不显眼的验证来验证我的表单。我在应用程序中构建了一个表单框架,每当我单击表单字段时,它都会显示一个简洁的小“帮助”弹出窗口。该区域一切正常,我对此感到满意。

问题是,我没有太多的空间可用于在每个表单之外显示的表单字段验证消息,如果我将它们放在表单字段下方,则调整大小会很难看。典型的表单字段如下所示:

标准表单字段

当我单击该字段时,将显示以下内容:

显示帮助文本的表单字段

当验证发生时,会发生以下情况:

显示验证的表单字段

我的解决方案是在验证发生时简单地隐藏帮助文本(我使用共享函数来执行此操作,让我们称之为“hideDescriptions()”)。站点中的每个表单都使用相同的框架,因此我希望能够在任何时候发生不引人注目的验证时调用 hideDescriptions()。

我的 javascript 分为多个文件,例如:

/Review/Create/ - 使用 createReview.js /Review/Read/ - 使用 readReview.js

它们都还包含“shared.js”。我希望能够扩展shared.js 文件中的jquery 不引人注目的验证插件,并将其一次性应用到网站中的每个表单...但我有点迷失了。据我所知:

$("form").validate({
    invalidHandler: function (form, validator) {
        hideDescriptions();
    }
});

但我非常清楚这是行不通的。我假设不显眼的验证器默认将验证器附加到所有表单,看起来好像我不需要自己附加它?

如果表单无效,有没有办法扩展不显眼的验证以执行通用回调?

I'm writing an MVC3 site, and I'm using JQuery unobtrusive validation to validate my forms. I've built a form framework within the app which shows a neat little "help" popup whenever I click on a form field. Everything works in that area, and I'm happy with it.

The issue is that I don't have very much real estate available for the form field validation messages that are displayed besides each form, and if I put them underneath the form fields, the resizing is ugly. Here's what a typical form field looks like:

Standard form field

When I click on the field, the following is shown:

Form field with help text shown

And when validation occurs, the following happens:

Form field with validation shown

My solution is to simply hide the help text when validation occurs (I use a shared function to do so, let's call it "hideDescriptions()"). Every form in the site uses the same framework, so I want to be able to call hideDescriptions() whenever the unobtrusive validation occurs, at any point.

My javascript is split in to a number of files, for example:

/Review/Create/ - uses createReview.js
/Review/Read/ - uses readReview.js

They both also include "shared.js". I was hoping to be able to extend the jquery unobtrusive validation plugin in the shared.js file, and apply it to every form in the site in one go... but I'm a bit lost. This is as far as I've gotten:

$("form").validate({
    invalidHandler: function (form, validator) {
        hideDescriptions();
    }
});

But I'm more than aware that won't work. I assume that the unobtrusive validator attaches the validator to all forms by default, seeing as though I don't need to attach it myself?

Is there a way I can extend the unobtrusive validation to perform a generic callback if the form is not valid?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

断桥再见 2025-01-12 00:28:33

花了 20 分钟写完之后,我发现了这个链接,它几乎解决了我的问题。这是我使用的代码:

$("form").bind("invalid-form.validate", function () {
    hideDescriptions();
});

但是,它几乎没有用,因为每当用户再次单击该字段时,就会显示描述!

理查德也提出了一个有效的观点 - 我将重新评估我的表格的工作方式:)

After spending 20 minutes writing that, I found this link, which pretty much solves my problem. Here's the code I used:

$("form").bind("invalid-form.validate", function () {
    hideDescriptions();
});

However, it's almost useless as whenever the user clicks in the field again, the description is shown!

Richard has also raised a valid point - I will re-evaluate the way my forms work :)

醉殇 2025-01-12 00:28:33

当人们犯了错误时,隐藏描述似乎不太合逻辑,因为没有更多关于他们应该做什么的帮助。

您可以指定错误标签的位置,例如,您可以将错误标签放在错误标签旁边输入字段的标题并在其间放置一个破折号。这样您就可以保留描述并且不会重叠。

Hiding the description doesn't seem very logical when people have made a mistake, because there is no more help on what they should do..

You can specify the location of the error labels, you could for example put the error label next to the title of the input field and place a dash in between.. That way you keep the description and it won't overlap.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文