Really simple scenario: Validate if the text input conforms to an email address. There is a simple and straightforward way of achieving this via the asp:RegularExpressionValidator.
However, I am the type of programmer who sometimes who wants a more granulated level of control and customization in the way I code and enhancing the user experience a bit more.
The hard way:
ValidateEmail.js
function validateEmail(TB_clientID) {
var msg = "";
var successful = true;
var TB = document.getElementById(TB_clientID);
var address = TB.value;
if (address == '') {
successful = false;
msg += "Please input email. ";
}
//..guard agains invalid characters
var invalidChars = '\/\'\\ ";:?!()[]\{\}^|';
for (i = 0; i < invalidChars.length; i++)
{
if (address.indexOf(invalidChars.charAt(i), 0) > -1)
{
msg += "Email address contains invalid characters";
successful = false;
}
}
//..validate against non ascii code (> 127)
for (i = 0; i < address.length; i++)
{
if (address.charCodeAt(i) > 127) {
msg += "Email address contains non ascii characters.";
successful = false;
}
}
var atPos = address.indexOf('@', 0);
if (atPos == -1)
{
msg += "Email address must contain an @";
successful = false;
}
if (atPos == 0) {
msg += "Email address must not start with @";
successful = false;
}
if (address.indexOf('@', atPos + 1) > -1)
{
msg += "Email address must contain only one @";
successful = false;
}
if (address.indexOf('.', atPos) == -1)
{
msg += "Email address must contain a period in the domain name.";
successful = false;
}
if (address.indexOf('@.', 0) != -1)
{
msg += "Period must not immediately follow @ in email address.";
successful = false;
}
if (address.indexOf('.@', 0) != -1)
{
msg += "Period must not immediately precede @ in email address.";
successful = false;
}
if (address.indexOf('..', 0) != -1) {
msg += "Two periods must not be adjacent in email address.";
successful = false;
}
var suffix = address.substring(address.lastIndexOf('.') + 1);
//..validate agains invalid domain names (that you define)
if (suffix.length != 2 && suffix != 'com' && suffix != 'net' && suffix != 'org' && suffix != 'edu' && suffix != 'int' && suffix != 'mil' && suffix != 'gov' & suffix != 'arpa' && suffix != 'biz' && suffix != 'aero' && suffix != 'name' && suffix != 'coop' && suffix != 'info' && suffix != 'pro' && suffix != 'museum') {
msg += "Invalid primary domain in email address.";
successful = false;
}
alert(msg);
return successful;
}
This code attempts to capture every possible scenario for user errors. My aspx file looks like:
<asp:TextBox ID="tb_emailLongWay" runat="server" Width="534px" />
<asp:Button ID="Button1" runat="server" Text="Submit" />
Hooking the JS function programmatically in the code behind:
Button1.Attributes["onClick"] = "return validateEmail('" + tb_emailLongWay.ClientID + "')";
Admittedly, this is a bit tedious. But the advantage is the fine grain of control it gives to the developer depending on the context this sort of strictness can be applied. Everything above can be achieved in what follows:
The (ridiculously) Short way:
<asp:TextBox ID="tb_emailShortWay" runat="server" />
<asp:RegularExpressionValidator
ControlToValidate="tb_emailShortWay"
ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Invalid Email Format"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
The last question is where did i come up with the ValidationExpression?
Here are the steps.
1. Drag a <asp:RegularExpressionValidator in the design surface
2. Go to the properties pane
3. Hit on Validation Express property. A button with a “...” will appear.
4. Select the desired regular expression validation.
5. Click ok.
6. Being befuddled, say to yourself, “it’s that fast?!!”
Here a nice link on regular expressions: http://regexlib.com/
Enjoy. For now, I’m outta here!