Question

所以我有一个表格与MVC 3，DataAnnotations和Unobtrusive javascript一起工作得很好。但是，我想在输入字段上添加“水印”，例如，默认情况下，“名字”文本框的值为“名字”。当用户点击它时，该值消失，如果他们离开该字段而没有输入任何内容，则再次出现“First Name”。此外，我已经实施并运作良好。

我的问题与我的视图模型的FirstName属性上的[Required]属性有关。如果用户提交表单，默认情况下该字段中包含“First Name”，因此它会通过“Required”验证。

处理这个问题的最佳方法是什么......我正在考虑一些选择：

1）在清除水印的不显眼的JS验证之前注入一些jQuery，以便在验证触发时，那些具有默认值的字段为空。我不确定这是可能的。在不引人注目的JS运行其验证之前，你能以某种方式注入一个函数吗？

2）修改[Required]属性或创建一个新属性以接受默认值，然后比较它以查看它们是否匹配。这引发了一些问题，因为我现在在多个位置指定了我的默认值，一个在UI中，另一个在代码中，并且感觉不对。

3）创建一个新的“Watermark”属性，我用它来装饰一个属性，指定该字段的默认值。创建一个新的HTML帮助程序（而不是TextBoxFor），它查找此属性并向标记发出适当的属性。修改或创建一个新的[Required]属性，该属性在同一个字段中查找[Watermark]的存在。这将“默认值”保留在一个位置并保持DRY原则，但感觉就像我将UI元素放入代码中（水印纯粹是可视化的），它也感觉像是一个过于复杂的解决方案，应该是一个简单的问题

有什么想法吗？

Answer 1

每个人都有它的优点/缺点。我喜欢保留此客户端并使用以下内容。

使用HTML5 placeholder attribute，对于支持它的浏览器，您不必再这样做了。

<input type="text" placeholder="First name" />

对于没有...的浏览器

在每个页面上，我们都为不支持某些功能的浏览器提供了一些兼容性脚本。在这种情况下，它是一些JavaScript和jQuery，可以检测浏览器是否支持placeholder属性。如果不是，则将字段值设置为占位符值，设置样式并添加适当的焦点/模糊事件处理程序。焦点/模糊事件处理程序适当地设置字段值。

然后在客户端验证脚本上检查字段值是否与占位符值不相等。

在您的情况下，这将意味着修改您不显眼的JS验证，以检查字段值是否等于占位符值

Answer 2

我可能会选择＃2，我认为你可以这样做，你不需要多次指定默认值。此外，如果您想验证未使用用户名，您可以使用远程验证，然后只检查名称是否已被采用或是默认名称，以便您可以免费获得所需的行为。

当文本框具有默认值时，MVC 3不显眼的javascript验证

2 个答案: