Jump to content

Controlling User Form Field Input With Jquery


Recommended Posts

I already have functions that strip out certain characters from form fields onblur, but I have so far manually added the onblur handler to each form field. jQuery makes attaching event handlers easier and I wanted to come up with a more general purpose way of attaching the blur handlers. I have several different levels of input control, though, depending on the type of data. Username fields have one pattern, email fields and textareas have yet different ones, and I have a catch-all one for fields that are none of the above, but which prevent basic sql injection characters. I have also got PHP versions, so fear not, but I want to make it clear to people who haven't disabled javascript that certain characters are not allowed. It's just a control issue :)Anyway, I need to branch my blur handler based on keywords in the inputs' name or id attributes (both are the same in all instances). So, I thought of this:

	$('#formS > form :input').blur(function() {	  if(this.attr('id').indexof('email') != -1) {		this.value = this.value.replace(/[^a-zA-Z0-9@_.-]/g, "");	  } else if(this.attr('id').indexof('username') != -1) {		this.value = this.value.replace(/[^a-zA-Z0-9_.-]/g, "");	  } else {	 this.value = this.value.replace(/[<>#~|=*{}]/g, "");	  }	});

However, I get complaints that .attr() is not a function. I tried $(this).attr('id') and this.attr('name') and $(this).get().attr('id') and many combinations of these, and can't seem to figure out just how to do it. I had this before (note that the replace functions exist as separate functions, too, at the moment, and that in each of these handlers, the same replace methods as seen above can be inserted wholesale):

	$('#formS > form :input[id*=username]').blur(function(event) {		 checkCharsUsername(this);	});	$('#formS > form :input[id*=password]').blur(function(event) {		 checkChars(this);	});	$('#formS > form :input[id*=body]').blur(function(event) {		 checkChars(this);	});

which worked fine, but it doesn't allow me to assign a default handler to those fields that don't match those criteria, since creating a handler for all $('#formS > form :input') matched elements would mean that those that matched the other selectors would have two handlers attached. This is perhaps not a bad thing, because the default handler is the least stringent and wouldn't step on the toes of the other more specific handler, but I would like a cleaner solution if possible. Any ideas?

Edited by chibineku
Link to comment
Share on other sites

Thanks for the link...that is extremely simple. I am in the process of redoing all the scripts on my site in jQuery, mostly as practice, and so will get to the image thing (at the moment I always make an AJAX call to a script which checks if the username or email address someone has typed in is already in use and if it is, a cross appears, and another that compares the confirmation username/email with the first. But it's pretty clunky and not perfect, so that's next in the firing line. For the actual live pattern matching, I have implemented the original way of doing it - assign handlers to inputs based on their ids having a specific substring, as well as a less strict pattern matched against all inputs, so I won't miss any. This isn't a security feature, it just lets users see they've entered characters that don't fit with the type of input that is required. I believe one of the upcoming chapters in my jQuery book deals with this kind of thing, too.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...