Well, the guy who has taught me everything I know about .NET, Bigyan, has taken off for a month to go back to Nepal to get married, leaving me with some very big shoes to fill while he is gone. While he is gone I have adopted a new philosophy that I am trying to follow, WWBD, What Would Bigyan Do?
While working on some bug fixes for a web application that we currently have in pilot testing for a client, I found myself working hard trying to prevent a post back, which I knew is exactly what Bigyan would do to increase the quality of the user experience. I needed to create a custom validator in ASP.NET and could have easily just made it a server side validation, but this would require a post back before telling the user that there was an input error. The way to eliminate this post back is to create a client side validation function using JavaScript.
This first thing that is necessary is to add a CustomValidator control to your page and to associate it to a control on the page by setting the ControlToValidate property.
Next, I would typically set the text of the CustomValidator control to an *. This is the text that shows up on the page where the custom validator exists. I normally position the CustomValidator either next to the control I am validating or next to the label for the control I am validating. The * then indicates to the user that there is an error with that field.
Following setting the text I set the ErrorMessage property of the CustomValidator to the error message I want to display. This message will then appear in the validation summary control if you have placed one on the page.
Now its time to do a little coding. First thing you will want to do is code up the server side validation for the validator. This part of the validation is important in case the user's browser doesn't support JavaScript or the user attempts to bypass the script on the client side.
In my particular case I was validating a rich textbox control that was required. In my particular case the control would be blank either if it was actually blank or if it had "<p> </p>", hence I could not just use the RequiredFieldValidator. To code the server side check you use the ServerValidate event of the CustomValidator control and check the value property of the args objects that is passed in by the system. Perform your logic and if the value passes set args.IsValid = True, otherwise set it to False.
Protected Sub CustomValidator1_ServerValidate(ByVal source As System.Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate
If String.IsNullOrEmpty(args.Value) Or args.Value = "<p> </p>" Then
args.IsValid = False
Else
args.IsValid = True
End If
End Sub
This function will then execute when a button that has its CausesValidation property set equal to true is clicked. Then, at any point in time if you want to check if all the validators on a page are valid you check if Page.IsValid is equal to true.
That’s it for handling the server side validation, but the next step is to handle the client side validation so that the client is not forced to look at a post back before knowing that they have an invalid input field.
To handle the client side validation you just need to write a simple JavaScript function that takes two parameters, sender and args. You can then evaluate args.Value against your logic, and set args.IsValid equal to either true or false.
function TxtQuestionValidate(sender, args)
{
if (args.Value == '' || args.Value == '<p> </p>')
{
args.IsValid = false;
}
else
{
args.IsValid = true;
}
}
You have a couple options for placing the javascript function. The simple way would be just to put it right into the .ascx page. Whereas this is easy, I try to steer away from this as you would then need to place this function in every page where you need it. I prefer to write a service layer function that returns it to me as a string and then insert it into the page on the page load event as follows:
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "TxtQuestionValidate", Services.GeneralService.GetTxtBoxValidateJavascript(), True)
Finally, you need to tell Studio to use this function as the client side script so on your custom validation control simple set the ClientValidationFunction to the name of your JavaScript function. You now have a custom validation with a client side script to prevent a post back, which I am pretty sure is what Bigyan would do. I hope he’s having a good time in Nepal, but I’ll be happy to have him back in 25 days. Its boring going to Starbucks by myself!