当文本框具有默认值时，MVC 3 不引人注目的 JavaScript 验证
所以我有一个与 MVC 3、DataAnnotations 和 Unobtrusive javascript 配合得很好的表单。但是，我想在输入字段上添加“水印”，例如，默认情况下，“名字”文本框会填充“名字”值。当用户单击它时，该值就会消失，如果他们离开该字段而不输入任何内容，“名字”会再次出现。另外，我已经实施了这个并且运行良好。
我的问题与视图模型的 FirstName 属性上的 [Required] 属性有关。如果用户提交表单，默认情况下该字段中包含“名字”，因此它通过“必填”验证。
处理这个问题的最佳方法是什么...我正在考虑几个选项：
1）在清除水印的不显眼的 JS 验证之前注入一些 jQuery 来触发，这样当验证触发时，那些具有默认值的字段它们是空白的。我不确定这是否可能。你能在不显眼的 JS 运行验证之前以某种方式注入一个函数吗？
2) 修改[Required]属性或创建一个新属性以接受默认值，然后比较它是否匹配。这引发了一些问题，因为我现在在多个位置指定了默认值，一个在 UI 中，一个在代码中，这感觉不对。
3）创建一个新的“水印”属性，我用它来装饰一个属性，指定该字段的默认值。创建一个新的 HTML 帮助程序（而不是 TextBoxFor）来查找此属性并向标记发出适当的属性。修改或创建一个新的 [Required] 属性，用于查找同一字段上是否存在 [Watermark]。这将“默认值”保留在一个地方并遵循 DRY 原则，但感觉就像我将 UI 元素放入代码中（水印纯粹是视觉的），而且对于本应是一个简单问题的问题来说，它也感觉像是一个过于复杂的解决方案。
有什么想法吗？
So I have a form working quite well with MVC 3, DataAnnotations and Unobtrusive javascript. However, I want to put a "watermark" on my input fields so that for example, the First Name textbox is populated with a value of "First Name" by default. When the user clicks on it, the value disappears and if they move off the field without entering anything, "First Name" appears again. Also, I have this implemented and working well.
My question has to do with the [Required] attribute on the FirstName property of my view model. If the user submits the form, by default that field has "First Name" in it so it passes the "Required" validation.
What's the best way to deal with this...I'm thinking of a few options:
1) Inject some jQuery to fire before the unobtrusive JS validation that clears the watermarks so that when the validation fires, those fields that have default values in them are blank. I'm not sure this is possible. Can you somehow inject a function before unobtrusive JS runs its validation?
2) Modify the [Required] attribute or create a new one to accept a default value and then compare it to see if they match. This raises a few issues in that I now have my default value specified in multiple places, one in the UI and one in code and that feels wrong.
3) Create a new "Watermark" attribute that I decorate a property with that specifies the default value for that field. Create a new HTML helper (instead of TextBoxFor) that looks for this attribute and emits the appropriate attributes to the tag. Modify or create a new [Required] attribute that looks for the existence of [Watermark] on the same field. This keeps the "Default value" in one place and keeps with DRY principles, but it feels like I'm putting UI elements into code (watermarks are purely visual) and it also feels like an overly complex solution for what should be a simple issue.
Any thoughts?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
每个都有它的优点/缺点。我喜欢保留这个客户端并使用了以下内容。
使用 HTML5 占位符属性 以及支持它的浏览器你不必再做任何事了。
对于不支持的浏览器...
在每个页面上，我们都有一些针对不支持某些功能的浏览器的兼容性脚本。在本例中，使用一点 JavaScript 和 jQuery 来检测浏览器是否支持
placeholder属性。如果没有，它将字段值设置为占位符值，设置样式并添加适当的焦点/模糊事件处理程序。焦点/模糊事件处理程序适当地设置字段值。然后在客户端验证脚本上检查字段值是否不等于占位符值。
在您的情况下，这意味着修改您的不引人注目的 JS 验证以检查字段值不等于占位符值
Each has it's pros/cons. I like to keep this client side and have used the following.
Use the HTML5 placeholder attribute and for browsers that support it you don't have to do anymore.
For browsers that don't...
On every page we have some compatability script for browsers that don't support certain features. In this case it's a little bit of JavaScript and jQuery that detects if the browser supports the
placeholderattribute. If it doesn't it sets the field value to the placeholder value, sets the styling and adds the appropriate focus/blur event handlers. The focus/blur event handlers set the field value appropriately.Then on your client validation script check that field value doesn't equal the placeholder value.
In your case this would mean modifying your unobtrusive JS validation to check the field value doesn't equal the placeholder value
我可能会选择#2，我认为你可以这样做，这样你就不需要多次指定默认值。此外，如果您想验证用户名是否未被占用，您可以使用远程验证，然后只需检查该名称是否已被占用或者是默认名称，这样您就可以免费获得您想要的行为。
I would probably go with #2, I think you could go about doing this in such a way that you do not need to specify the default value more than once. Also, if you wanted to validate that a user name was not taken you could use remote validation and then just check if the name was already taken or was the default name so you could get the behavior you wanted for free.