Validation control and static asterix display

This is one of the most common problems that every programmer faces with the validation controls available in ASP.net. I am taking the example of RequiredFileldControl validation control to explain the problem and a simple solution to it.

In web forms we often create text boxes to access input from the user. Some of these text boxes require the values to be entered before the form is submitted. To Indicate it as a mandatory field the normal practice has been to show a red asterix besides the text box.

The RequiredFileldControlcontrol has two properties ErrorMessage and Text.

ErrorMessage: This property is used to display the error message in the ValidationSummary control when the form is submitted and user has not given any text in the text box

Text: We can use this property to show the asterix that we talked about in the above paragraphs.

So where is the problem?

The problem is that if you put an asterix character in the Text property, it will only show only after you submit the form and not before that. But this is not what you wanted. You wanted the asterix to be always displayed to indicate it as a mandatory field.

Soulution #1 (That does not work as expected)

One of the solution is to type an asterix character besides the text box and change the color to red and keep the "Text" property blank.

The problem is that if you keep the Text property blank, when you submit the form, the text inside the property "ErrorText" is displayed. This means you will see an asterix symbol (that you cretad manually) and the Error message. This doesnt look good!. So you cannot leave the "Text" property blank because you do not want the error text message to appear at two places 1) validation summary control and 2) besides the text box.

Solution #2

The solution is to keep the "Text" property blank and somehow make the RequiredFieldControl not to display the error message if it is blank. How can we do this?. The solution simple. Follow these steps.

1) Drag a RequiredFieldControl to the form.
2) Set the Text property to any text. For example give a value "Dummy" (without quotes)
3) Switch to source view where you can see the HTML code.
4) Search for the value you entered for the text field. Example here it is text "Dummy".
5) Select this text and replace it with  
6) Done!

Please remember you still have to type the static asterix with red color besides the text box.

hope this helps! ;)