My customized TextBox control with various validators integrated, is it convenient for you as well?
It is so boring that when every time i create a form that need to be filled in by the user, for example, the Password field, and Re-Password field, E-mail Address field and Comfirm E-mail Address field, i need to create the RequiredFieldValidator, RegularExpressionValidator, and CompareValidator for each of them. That is really messy and redundent for the Aspx pages.
So, I am thinking about to customize the default TextBox control and write a my own OTextBox control with all the three validators integrated inside the OTextBox.
By doing this, OTextBox can enable me, if I want an OTextBox instance that need to have the regular expression to validate its input before submit, just set its ValidateRegularExpression propertity to a pre-defined RegularExpressionType, and nothing more to add in the Aspx pages.
Here is the code:
--------------------------------------------------------------------------------
OTextBox.cs
public class OTextBox : System.Web.UI.WebControls.TextBox
{
private RequiredFieldValidator _requiredValidator;
private CompareValidator _compareValidator;
private RegularExpressionValidator _regularValidator;
// ValidatorCalloutExtender is a pop up box with the error message when the error occurs
// with its validator and this ValidatorCalloutExtender is from AjaxControlToolkit.
private ValidatorCalloutExtender _requiredCalloutExtender;
private ValidatorCalloutExtender _compareCalloutExtender;
private ValidatorCalloutExtender _regularCalloutExtender;
/// <summary>
/// If this propertity is set to true, then the RequiredFieldValidator
/// will be added and validate the text field in current control.
/// </summary>
public bool Required
{
set{ this.ViewState["Required"] = value; }
get
{
if (this.ViewState["Required"] != null)
return (bool)this.ViewState["Required"];
return false;
}
}
/// <summary>
/// If this propertity is set to a value, then the CompareValidator
/// will be added and compare the text field in current control
/// to the control that is given by this propertity.
/// </summary>
public string CompareToTextBoxID
{
set{ this.ViewState["CompareToTextBoxID"] = value; }
get
{
if (this.ViewState["CompareToTextBoxID"] != null)
return (string)this.ViewState["CompareToTextBoxID"];
return string.Empty;
}
}
/// <summary>
/// If this propertity is set to a value, then the CompareValidator
/// will be added and compare the text field in current control
/// to the control that is given by this propertity.
/// </summary>
public RegularExpressionType ValidateRegularExpression
{
set{ this.ViewState["ValidateRegularExpression"] = value; }
get
{
if (this.ViewState["ValidateRegularExpression"] != null)
return (RegularExpressionType)this.ViewState["ValidateRegularExpression"];
return RegularExpressionType.None;
}
}
/// <summary>
/// Nothing much, the constructor.
/// </summary>
public void OTextBox
{
// Can put something here
}
/// <summary>
/// will create all the necessary controls and add them to the Controls collection
/// </summary>
protected override void OnInit(EventArgs e)
{
// For RequiredValidator
if (this.Required)
{
_requiredValidator = new RequiredFieldValidator();
_requiredValidator.ControlToValidate = this.ID;
_requiredValidator.ID = "RequiredValidator" + this.ID;
_requiredValidator.Display = ValidatorDisplay.None;
_requiredValidator.ErrorMessage = "Your Error Message For RequiredValidator";
_requiredCalloutExtender = new ValidatorCalloutExtender();
_requiredCalloutExtender.TargetControlID = _requiredValidator.ID;
_requiredCalloutExtender.ID = "RequiredCallout" + this.ID;
_requiredCalloutExtender.HighlightCssClass = "YourCssForThisPopUp";
_requiredCalloutExtender.Width = 100; // The width you want this pop to be
Controls.Add(_requiredValidator);
Controls.Add(_requiredCalloutExtender);
}
// For CompareValidator
if (!string.IsNullOrEmpty(this.CompareToTextBoxID))
{
OTextBox txtBoxNeedToCompare = (OTextBox)this.Parent.FindControl(this.CompareToTextBoxID);
if (txtBoxNeedToCompare != null)
{
_compareValidator = new CompareValidator();
_compareValidator.ControlToValidate = this.ID;
_compareValidator.ControlToCompare = this.CompareToTextBoxID;
_compareValidator.ID = "CompareValidator" + this.ID;
_compareValidator.Display = ValidatorDisplay.None;
_compareValidator.ErrorMessage = "Your Error Message For CompareValidator";
_compareCalloutExtender = new ValidatorCalloutExtender();
_compareCalloutExtender.TargetControlID = _compareValidator.ID;
_compareCalloutExtender.ID = "CompareCallout" + this.ID;
_compareCalloutExtender.HighlightCssClass = "YourCssForThisPopUp";
_compareCalloutExtender.Width = 100; // The width you want this pop to be
Controls.Add(_compareValidator);
Controls.Add(_compareCalloutExtender);
}
}
// For RegularExpressionValidator
if (this.ValidateRegularExpression != RegularExpressionType.None)
{
_regularValidator = new RegularExpressionValidator();
_regularValidator.ControlToValidate = this.ID;
_regularValidator.ID = "RegularExpressionValidator" + this.ID;
_regularValidator.Display = ValidatorDisplay.None;
_regularValidator.ErrorMessage = "Your Error Message For RegularExpressionValidator";
switch(ValidateRegularExpression)
{
case RegularExpressionType.Email:
_regularValidator.ValidationExpression = "Your regular express for email";
break;
case RegularExpressionType.Domain:
_regularValidator.ValidationExpression = "Your regular express for domain";
break;
case RegularExpressionType.PhoneNumber:
_regularValidator.ValidationExpression = "Your regular express for phone number";
break;
// Can add more if needed.
}
_regularCalloutExtender = new ValidatorCalloutExtender();
_regularCalloutExtender.TargetControlID = _regularValidator.ID;
_regularCalloutExtender.ID = "RegularCallout" + this.ID;
_regularCalloutExtender.HighlightCssClass = "YourCssForThisPopUp";
_regularCalloutExtender.Width = 100; // The width you want this pop to be
Controls.Add(_regularValidator);
Controls.Add(_regularCalloutExtender);
}
}
/// <summary>
/// Render these controls
/// </summary>
public override void RenderControl(System.Web.UI.HtmlTextWriter writer)
{
base.RenderControl(writer);
// For RequiredValidator
if (this.Required)
{
_requiredValidator.RenderControl(writer);
_requiredCalloutExtender.RenderControl(writer);
}
// For CompareValidator
if (!string.IsNullOrEmpty(this.CompareToTextBoxID))
{
OTextBox txtBoxNeedToCompare = (OTextBox)this.Parent.FindControl(this.CompareToTextBoxID);
if (txtBoxNeedToCompare != null)
{
_compareValidator.RenderControl(writer);
_compareCalloutExtender.RenderControl(writer);
}
}
// For RegularExpressionValidator
if (this.ValidateRegularExpression != RegularExpressionType.None)
{
_regularValidator.RenderControl(writer);
_regularCalloutExtender.RenderControl(writer);
}
}
}
RegularExpressionType.cs
public enum RegularExpressionType
{
None = 0,
Email = 1,
PhoneNumber = 2
}
--------------------------------------------------------------------------------
I only showed an example of how to customize the TextBox control, actually, there are still a lot of useful functionalities that can be integrated, such as ValidationGroup, and other extra stuff that can be extended to the default TextBox control.
Hope this article can help someone and reduce the amount of work.