Using TextBoxWatermarkExtender with RequiredFieldValidator control

Introduction

This is one of the common questions asked in forums. “How to use TextBoxWatermark with validation control?”

if u try to add ajax TextBoxWatermark extender in the existing page, it can be noted that validation controls like RequiredFieldValidator are failing.

in this short article, we will see way to handle this.

 

Background

why validation control is failing then, simple reason is, validation control is validating, if value in textbox is blank but it finds some (watermark text) and there would not be any validation

message and event is fired.

 

Article Body

If you are adding textboxwatermarkextender to an existing aspx page then you can come across a scenario where your normal requiredfield validator is not making any  sense.

To understand the scenario, consider this is the form tag of existing aspx page which is working fine.

<form id="formRegister" runat = "server">
  <div>
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="rqdValidateName" runat="server" ErrorMessage="Please enter some text" ControlToValidate="txtName" Display="Dynamic">    
    </asp:RequiredFieldValidator>
    <br />
    <asp:Button ID="BtnSubmit" runat="server" Text="Check Validator" />
  </div>
</form>

this is simple form with one textbox as name field, requiredfieldvalidator and button. Everything works fine. After some time as an enhancement we want to add TextboxWatermarkExtender for textbox txtName. what it does…

1) This will add some watermark text to textbox txtName.
2) Once user start entering text in textbovmxcz then watermarktext would disappear.
3) If nothing enterd by user, then watermarktext remains as it is in the textbox.

Point 3 where we want our old requiredfield validator to work. but, required checks textbox for no value and it find some (watermark text) and it clears the validation allowing button click event to fire.

 

Solution

There is little twick required to make our old requiredfield validator work even with watermark text. The fact remains that watermark text is now a textbox value. but we can make this watermarktext as initialvalue for requiredfieldvalidator so that, requiredfieldvalidator will treat this text as blank.

thats where InitialValue property of requiredfieldvalidator control comes handy. Set same watermark text to InitialValue property of requiredfield validator.

We would add one more requiredfieldvalidator here, to handle the case in event of TextBoxWatermarkExtender not working. Now, we have InitialValue of old requiredfieldvalidator set to watermarktext and new TextBoxWatermarkExtender and one more requiredfieldvalidator and everything working fine again with new enhancement of watermark text

<form id="formRegister" runat = "server"> 
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server"> </asp:ToolkitScriptManager>
<div>
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="rqdValidateName" runat="server"   
    InitialValue="Enter your name"   ErrorMessage="Please enter some text"
    ControlToValidate="txtName" Display="Dynamic">     
   </asp:RequiredFieldValidator>
   <asp:RequiredFieldValidator ID="rqdValidateName2" runat="server" 
    ErrorMessage="Please enter some text" ControlToValidate="txtName" 
    Display="Dynamic">
   </asp:RequiredFieldValidator>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Check Validator" />
    <asp:TextBoxWatermarkExtender ID="wMarkExtndr" 
    TargetControlID="txtName" WatermarkText="Enter your name" 
    runat="server">
    </asp:TextBoxWatermarkExtender>
</div>
</form>

Conclusion

While using TextBoxWatermarkExtender in combination with requiredfield validator, little twick is required.

but, InitialValue property of requiredfield validator comes handy in this situation and TextBoxWatermarkExtender can be used swiftly.

References

More details about Initial value property of requiredfield validator can be found here.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.requiredfieldvalidator.initialvalue.aspx