Automatic jQuery Fake Name Checker

I had a great time presenting my jQuery, WCF Databinding talk at the Philly Code Camp yesterday. As usual I keep adding 'features' to the demonstration application I use in the session. Since I last delivered the talk I added a few creature comforts of sorts to the application. Today I want to review how I added a Fake Name checker to the contact form.

The context for my Fake Name checker comes from a real honest to goodness application I build about 9 years ago. My client launched, but was not happy he could not sign up with a fake credit card number (this is no joke). So he demanded I remove all and I mean all data validation from the site. Needless to say within a few weeks Mickey Mouse and a entire army of fictional characters were new members with fake credit cards on file.

As I thought about that project again this week I had this funny thought about extending the Username Availability checker I posted about last year to screen for obviously fake names. How realistic this is to actually implement in production is slim, but I thought it would serve to prove a point about making real-time validation happen. If you think about it you could tie this action to just about any screening process. I was thinking maybe a real-time Akismet, bad word checker, etc.

Starting at the bottom of the process there needs to be some business logic. For the demo, I chose to add 2 different names, Mickey Mouse and Steve Ballmer. I defined two totally different responses to either of these names being entered in the First and Last name fields. All other names just naturally pass through without any client-side interference. The CheckFakeName method accepts the first and last name, checks it and then returns a CheckFaleNameResponse class. The CheckFakeNameResponse class has a validState property that indicates if the name is allowed or not. If not then the responseMsg is set and will be displayed later. Finally I also added a third property for an optional message used to pre-populate the form's comment field.

public

CheckFakeNameResponse CheckFakeName(

string

firstName,

string

lastName)
{
var response =

new

CheckFakeNameResponse()
{
validState =

true

,
responseMsg =

""

,
commentMsg =

""


};

if

(firstName.ToLower() ==

"micky"

&& lastName.ToLower() ==

"mouse"

)
{
response.validState =

false

;
response.responseMsg =

"Seriously??? You expect me to belive this?"

;
}

else

if

(firstName.ToLower() ==

"steve"

&& lastName.ToLower() ==

"ballmer"

)
{
response.validState =

false

;
response.responseMsg =

"We are so honored to have you."

;
response.commentMsg =

"Developers!!!! Developers!!!! Developers!!!!! YEAH!!!!"

;
}

return

response;
}

The service method simply returns the result to the client, in JSON of course ;). The JavaScript calls the service just like the other methods, first creating a request object containing the form's first and last name values.

function

CheckFakeName() {

var

request = {
firstName: $(

"#FirstName"

).val(),
lastName: $(

"#LastName"

).val()
};

ContactServiceProxy.invoke({ serviceMethod:

"CheckFakeName"

,
data: { request: request },
callback:

function

(response) {

if

(!response.validState) {
alert(response.responseMsg,

"Reality Check"

,

function

() {

if

(response.commentMsg !==

''

) {
$(

"#Comment"

).val(response.commentMsg);
}

});
}

},
error:

function

(xhr, errorMsg, thrown) {
postErrorAndUnBlockUI(xhr, errorMsg, thrown);
}
});

return

false

;
}

The callback function displays an alert dialog with the responseMsg and the title 'Reality Check'. Notice I defined a callback function to be called when the alert dialog is closed. More on that in my next post, but if there is a commentMsg it is added the form's comment textarea.

 

Now that I have shown all the steps in the check process I need to show how all this is initiated. In the jQuery Ready function I defined an event handler for the lastName's the blur event. This checks to make sure there is content in both the first and last name fields, if so it then calls the CheckFakeName function.

 

$(

"#LastName"

).live(

"blur"

,

function

() {

if

($(

"#FirstName"

).val() !==

''

&&
$(

"#LastName"

).val() !==

''

) {
$.WCFjQuery.CheckFakeName();
}

});

That's pretty much it. By using an AJAX call the screening is done behind the scenes and does not interfere with the user's progress. Well that is unless you are Mickey Mouse or Steve Ballmer.

My next post will discuss how I display a nicer looking alert dialog instead of the boring battleship grey alert we have become accustomed to viewing.

 

Share This Article With Your Friends!