在带有水印的输入上使用必填字段验证器

Question

My Required validation for a field doesn't work because even the user didn't input anything, the watermark text is sent to the server. What's the best way to handle this? I'm using jquery and asp.net mvc.

Answer 1

You can use jQuery updnWatermark plugin to insert watermarks on the page that don't write text to your textboxes, but insert new transparent element with your watermarks: updnWatermark . Thats how you can validate your controls with Required validators without any tricks.

1. Add reference to plugin: <script src="~/Scripts/jquery.updnWatermark.js" type="text/javascript"></script> .
2. Assign some CSS class to your input elements that needed watermarks, for example Watermark class.
3. Set the ToolTip attribute that will contain watermark text to elements that needed watermarks.

4. Add next code to the page:

   $.updnWatermark.attachAll({ cssClass: 'Watermark' });

Answer 2

The HTML5 placeholder attribute allows the browser to display a watermark and so the watermark value is not submitted back to the server on form posts.

Then add an extra bit of jQuery in your page for browsers that do not support placeholder .

Answer 3

If you don't want to include additional plugins you can always override the validator:

$.validator.methods.required = function (value, element) {      
  // some code
}

Remember though that this overrides the default required validator for all required checks on the page.