使用必填字段验证器更改文本框颜色。 请不要使用扩展器控制
每当单击“提交”按钮时触发所需的字段验证器时,我需要更改文本框的颜色
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
每当单击“提交”按钮时触发所需的字段验证器时,我需要更改文本框的颜色
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(17)
您可以做的是注册一个 Javascript 函数,该函数将在提交后遍历全局 Page_Validators 数组,并且您可以适当地设置背景。 这样做的好处是您可以在页面上的所有控件上使用它。 该函数如下所示:
最后一步是使用 OnSubmit 事件注册脚本:
VB.NET:C#
:
您将在所有后面的代码中维护正确的 IsValid 状态,并且它可以与您的所有控件一起使用。
注意:我从 以下博客。 我只是想在这里记录一下,以防源博客出现故障。
What you can do is register a Javascript function that will iterate through the global Page_Validators array after submission and you can set the background appropriately. The nice thing about this is that you can use it on all of your controls on the page. The function looks like this:
The final step is to register the script with the OnSubmit event:
VB.NET:
C#:
You'll maintain the proper IsValid status in all of your code behind and it can work with all of your controls.
Note: I found this solution from the following blog. I just wanted to document it here in the event the source blog goes down.
您可以非常轻松地重写 ASP.NET 的 javascript 函数来更新已验证字段的显示。 这是一个不错的选择,因为您可以保留现有的字段验证器,而不必编写任何自定义验证逻辑或寻找要验证的字段。 在下面的示例中,我从具有类“control-group”的父元素添加/删除“错误”类(因为我正在使用 twitter bootstrap css):
这是从 此处以及来自 这些文章。
You can very easily override ASP.NET's javascript function that updates the display of validated fields. This is a nice option as you can keep your existing Field Validators, and don't have to write any custom validation logic or go looking for the fields to validate. In the example below I'm adding/removing an 'error' class from the parent element that has class 'control-group' (because I'm using twitter bootstrap css):
This is adapted ever-so-slightly from here and with helpful info from these articles.
您可以使用 CustomValidator 代替RequiredFieldValidator:
.ASPX
.CS
客户端和服务器验证函数中的逻辑是相同的,但客户端函数使用 jQuery 来访问文本框值并修改其值背景颜色。
You could use CustomValidator instead of RequiredFieldValidator:
.ASPX
.CS
Logic in client and server validation functions is the same, but the client function uses jQuery to access textbox value and modify its background color.
聚会已经很晚了,但为了防止其他人偶然发现这个问题并想要一个与 Bootstrap 一起使用的完整答案,我已经采用了上面的所有示例,并制作了一个可以与附加到单个控件的多个验证器一起使用的版本,并将与验证组一起工作:
Very late to the party, but just in case someone else stumbles across this and wants a complete answer which works with Bootstrap, I've taken all the examples above, and made a version which will work with multiple validators attached to a single control, and will work with validation groups:
我喜欢 Rory 的答案,但它不适用于 ValidationGroups,尤其是在我的实例中,一个字段上有两个由两个不同按钮触发的验证器。
问题是,如果验证器不在当前的 ValidationGroup 中,ValidatorValidate 会将其标记为“isValid”,但我们的类更改代码没有任何关注。 这意味着显示不正确(当然IE9似乎不喜欢玩)。
所以为了解决这个问题,我做了以下更改:
I liked Rory's answer, but it doesn't work well with ValidationGroups, certainly in my instance where I have two validators on one field triggered by two different buttons.
The problem is that ValidatorValidate will mark the validator as 'isValid' if it is not in the current ValidationGroup, but our class-changing code does not pay any attention. This meant the the display was not correct (certainly IE9 seems to not like to play).
so to get around it I made the following changes:
在 css 中:
在您的页面中:
在上面页面的末尾
in css:
in your page:
at the end of your page above of
我喜欢亚历山大的回答,但希望 JavaScript 更通用。 因此,这是一种消耗自定义验证器错误的通用方法。
I liked Alexander's answer, but wanted the javascript to be more generic. So, here is a generic way of consuming the errors from a custom validator.
另一种可能性...这段代码为控件提供了一个红色边框(或者您在 CSS 类中放入的任何内容)以进行验证(适用于下拉列表和文本框,但可以扩展为按钮等...)
首先,我使用使用 CustomValidator 而不是RequiredFieldValidator,因为这样您就可以使用 CustomValidator 的 ClientValidationFunction 来更改要验证的控件的 CSS。
例如:当用户忘记填写文本框 MyTextBox 时,更改其边框。MyTextBox 控件的 CustomValidator 如下所示:
或者它也适用于需要进行选择的下拉列表。 CustomValidator 看起来与上面相同,但 ControlToValidate 指向下拉列表。
对于客户端脚本,请使用 JQuery。 ValidateInput 方法如下所示:
“validation”类是一个 CSS 类,其中包含触发验证器时的标记。 它可能看起来像这样:
PS:为了使边框颜色适用于 IE 中的下拉列表,
将以下元标记添加到页面标题:
。
[*]这与RequiredFieldValidator的“InitialValue”相同。 这是当用户尚未选择任何内容时默认选择的项目。
Another possibility... this code gives a red border (or whatever you put inside the CSS class) to the control to validate (works for dropdownlists and textbox, but can be extended for buttons etc...)
First of, I make use of a CustomValidator instead of a RequiredFieldValidator, because then you can use the ClientValidationFunction of the CustomValidator to change the CSS of the control to validate.
For example: change the border of a textbox MyTextBox when a user forgot to fill it in. The CustomValidator for the MyTextBox control would look like this:
Or it could also work for a dropdownlist in which a selection is required. The CustomValidator would look the same as above, but with the ControlToValidate pointing to the dropdownlist.
For the client-side script, make use of JQuery. The ValidateInput method would look like this:
The “validation” class is a CSS class that contains the markup when the validator is fired. It could look like this:
PS: to make the border color work for the dropdown list in IE,
add the following meta tag to the page's heading:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
.[*]This is the same as the “InitialValue” of a RequiredFieldValidator. This is the item that is selected as default when the user hasn’t selected anything yet.
我知道这已经很旧了,但我有另一个来自 Dillie-O 和 Alexander 的修改组合。 这使用 jQuery 和模糊事件来在验证成功时删除样式。
I know this is old, but I have another modified combination from Dillie-O and Alexander. This uses jQuery with the blur event to remove the style when validation succeeds.
我也喜欢亚历山大和史蒂夫的回答,但我想要与代码隐藏相同的答案。 我认为这段代码可以做到这一点,但它会根据您的设置而有所不同。 我的控件位于内容占位符内。
I too liked Alexanders and Steves answer but I wanted the same as in codebehind. I think this code might do it but it differes depending on your setup. My controls are inside a contentplaceholder.
另一种方式,
参考:
http://www.codedigest.com/Articles/ASPNET/414_Highlight_Input_Controls_when_Validation_fails_in_AspNet_Validator_controls.aspx
Another way,
Reference:
http://www.codedigest.com/Articles/ASPNET/414_Highlight_Input_Controls_when_Validation_fails_in_AspNet_Validator_controls.aspx
我为常规 asp.net 制作了一个有效的寻呼机示例,没有 .control-group
I made a working one pager example of this for regular asp.net, no .control-group
这里有一些独立的 HTML/JS 可以实现这个目的:
Here's some self-contained HTML/JS that does the trick:
我必须对史蒂夫的建议进行一些更改才能让我的建议正常工作,
尽管这是一个很好的例子,但正是我所需要的。
I had to make a few changes to Steve's suggestion to get mine working,
great example though, exactly what I needed.
这并不完全不需要改变用户习惯的控件,但我认为这种方式更容易(不写完整的示例,我认为没有必要):
ASP.NET:
代码:
It is not exactly without changing controls user used to, but I think this way is easier (not writing the full example, I think it is not necessary):
ASP.NET:
Code:
我结合了很多答案,现在我有了一些非常适合我的东西:
Css:
ASPX输入文本+验证:
然后您需要在关闭正文标记之前直接在页面末尾添加此脚本:
I combined a lot of answers and now I have something that works perfectly for me:
Css:
ASPX input text + validations:
Then you need to add this script straight at the end of the page just before you close the body tag: