Verify E-mails as they are typed

Question

On my page a users (internal staff members) can type a comma separated list of e-mail addresses. What I would like to do is every time a comma is typed it checks that the newly written e-mail address is in the address book.

Currently I have the address book stored as a Hashtable for O(1) search times but I can easily switch to another data structure if it is recommended.

Answer 1

You can do that with JavaScript and AJAX to communicate with the server side.

You can do the next steps:

1. Create a web service that gets the string from the client (which is the email the user has typed), checks it and returns true/false.
2. Add [ScriptService] attribute to the web service class.
3. On the page, add an ASP.NET ScriptManager control with Scripts/ScriptReference that points to the web service from step 1.
4. On the page, add javascript code that hooks to the onkeydown event of the emails textbox
5. In this event handler, if the user types a comma, execute a web service request to the server with the textbox value. When the respond (true or false) is received, do whatever you need with it.

You can read more on MSDN here and here. You might also find helpful the AutoComplete AJAX extender.

Answer 2

You have to do this with Javascript. After the comma is typed, only then you can pass the email back to C# backend for verification.

Answer 3

In order for it to be done on keypress there is going to be javascript (or client side vbscript if you're using IE) involved. This cannot be done without it if you're looking to do it based on keyed input.

If you were to do it when the user leaves that text box, then you could use AutoPostback and code it in C# on the server side - I have to say though, I think that approach is ugly. Requiring a synchronous postback to validate data is a huge imposition on the user in my opinion and therefore should only really be a last resort or a stopgap while you're getting asynchronous script to do the work. You could also do it at post time (when they're trying to submit the form) and validate them and give the user back a validation message if any of the addresses fail, but once again, this is synchronous and the user doesn't get the benefit of early feedback.

I would do this using either a Windows Service (or use RESTful service) using a javascript call (using the XmlHttpRequest object). Bind your textbox's keydown event to a JavaScript method.

<input type="text" onKeyDown="javascript:CheckInput(this)" />

Then set up your javascript call - this is the guts of what's going on:

(Disclaimer: This code is not production ready, it's merely an example that should give you some direction)

var req;

function CheckInput()
{
    if (window.event) keycode = window.event.keyCode;
    if (keycode == 188) //KeyCode 188 = Comma;
    {

        //I haven't provided code for this, you will need to code
        //the extraction of the address you wish to test for yourself...
        var addressToCheck = ParseLastAddressFromTextBox(); 

        req = new XMLHttpRequest();
        //Replace <SERVICEADDRESS> with the URL of your web service
        //the 'true' parameter specifies that the call should be asynchronous
        req.open("POST", "<SERVICEADDRESS>", true);
        req.onreadystatechange = MatchSearchComplete; //This is the callback method
        //Set up the post headers
        req.setRequestHeader("Host", "localhost");
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        var params = addressToCheck;
        req.setRequestHeader("Content-Length", params.length);
        //Iitiate the call to the service
        req.send(params);        }
}

//The XMLHttpRequest object will fire this method when the
//onreadystatechange event fires...
function MatchSearchComplete()
{
    //Check that the response has the correct state and status
    //indicating that we've received a response from the server.
    if (req.readyState == 4 && req.status == 200)
    {
        //Our call to the service is complete
        var result = req.responseText;
        if (result == "false")
            alert('The address "'+ req.params +'" is not valid.);
    }
}

So what you're doing here is setting up an XMLHttpRequest, pushing the data into it and firing it off to a web service.

Your ASP.NET web application will need a web service built in to it that will be doing the validation of the address.

I might also warn: What if there's only a single address and the user doesn't hit the comma? You should move the guts of the CheckInput() method out to it's own method which parses the addresses. The KeyDown method really should only check if the ',' was pushed. This way you can call the web service to check when the textbox loses focus also. I would also worry about modification of existing addresses without the user hitting the comma again. Therefore, I would wonder about this approach. I would consider that once an address is validated you should have a javascript that only allows that address to be deleted, it shouldn't be editable... whatever approach you take, I'm just warning you that there's some issue with just checking them using the entered ',' approach.