Use a required field to validate an input with a watermark

Question

My mandatory confirmation for the field does not work, because even the user did not enter anything, the text of the watermark is sent to the server. What is the best way to handle this? I am using jquery and asp.net mvc.

Answer 1

You can use the jQuery updnWatermark plugin to insert watermarks on a page that do not write text into your text fields, but insert a new transparent element with your watermarks: updnWatermark . The way you can test your controls with the necessary validators without any tricks.

• Add a link to the plugin: <script src="~/Scripts/jquery.updnWatermark.js" type="text/javascript"></script> .
• Assign some CSS class to your input elements that need watermarks, like the Watermark class.
• Set the ToolTip attribute, which will contain the watermark text for items that need watermarks.

• Add the following code to the page:

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

Answer 2

The HTML5 placeholder attribute allows the browser to display the watermark, so the watermark value is not returned to the server in form messages.

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

Answer 3

If you do not want to include additional plugins, you can always override the validator:

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

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