[lianite]

Hi all,

I am trying to create a custom input type and add a specific handler for processing and validating input for that type.

For example, say I want to make the following:

<input type='email' />

I want that input type to be validated in a specific way, similar to how the password type replaces all characters with the black dot.

Also, I would prefer to not use jQuery for this task if at all possible.

Anyone have any ideas?

Thanks,
Lianite

[BetaWar]

As of HTML5, there is an "email" input type... Just in case you didn't know.

However, if you are wanting to make something that acts in a custom way you will have to use Javascript to get it running (after all there has to be something there doing the processing for you and it needs to be running on the client side for it to be a useful GUI component). Nothing out there requires the use of jQuery, in fact jQuery is just a bunch of Javascript functions thrown together to make it easier to create things. Is there any particular reason you want to stay away from jQuery/ Javascript (I am assuming you don't want to use JS if you don't want to use jQuery, but I could be wrong)?

[lianite]

Actually, I am very proficient with javascript, however I don't like jQuery because of some quirky bugs. I started with javascript and learned how to manipulate the DOM the hard way, and jQuery oversimplifies much of that to me. That being said, jQuery is great for it's cross-browser compatability.

The reason I want to stay away from jQuery for this particular project is that I want to do a pure javascript implementation without the use of 3rd party plugins. It is primarily a way for me to help hone my javascript skills while still creating something useful to me.

Hopefully this made some sense.

[BetaWar]

Yeah, that makes sense. I do that all the time. I was just wanting to make sure that you weren't trying to use no scripting at all (which would make this pretty much impossible).

So, if you wanted to make an "email" input, I would start by deciding what you want it to act like. That could be as simple as you wanted (a text input for example that just checks for a valid email address -- though again this is done by default in the browser through HTML5). It could also be more complicated like a license key input (box:box:box:box), or ________@________.____ (sorry for the ASCII/ forum box image).

Either way, you will likely wind up replacing the original DOM with something more expansive (so you can have the multiple inputs, or something along those lines). At that point you will also need to capture the relevant events for the elements (such as click, focus, blur, keypress, keydown, and keyup) and do things based on those events.

This thread may help you get some ideas about how to replace things as needed (in particular the short and long versions of the toggle button (which replaces a standard button input with the necessary other elements to get it working as I wanted).

Hopefully that helps