I recently did some freelance work that required using masked forms on common field inputs: credit card information, phone numbers, dates, etc. To satisfy this request I used jQuery and meioMask – a jQuery plug-in.
First off, click here to view the working demo or click the image below:
To create a form similar to the demo above:
1. Visit the meioMask Website, the documentation and directions are straight-forward for setting up your form.
2. Apply CSS to style your forms.
3. Make your forms function with PHP.
4. Upload your forms to the web.
Resources:
meioMask Website - Read
jQuery – Needed in order for meioMask to function properly.
Need some help? I’m available for freelance work: please contact me!
Note: One thing I am noticing is there’s a delay when entering the date in the input field, not a major problem but could confuse some users.
Related posts:
- jFlow Slider Auto Slider with Pause Functionality Attention: jFlow Plus is Out This article uses an outdated version of jFlow and, although it works just fine, lacks some enhancements. Please check out jFlow Plus on my other website WordImpressed.com! There you can read about jFlow Plus and view a cool demo. jQuery sliders make a great website addition. Are you using the [...]...
- WordPress Lavalamp Navigation Tutorial Lavalamp is an awesome jQuery plug-in that makes really cool effects for WordPress-based menus and navigation links, and as a bonus it is very lightweight. It can be a bit tricky to implement in WordPress, but after you read this tutorial hopefully you'll be implementing it with ease. Follow along and let's get your site's [...]...
- WordPress Fix: Attribute “role” is not a valid attribute I like to design websites that are W3C Compliant. Your WordPress theme may require some tweaking to be valid. One error I kept receiving was: Attribute "role" is not a valid attribute. Did you mean "frameborder" or "scrolling"? I will show you how to correct this error. Simply put, to correct the error we are [...]...
- JavaScript Email Address Validation JavaScript makes it easy to validate form fields such as the commonly used email address field. For web designers trying to validate the email field, this simple script provided by Smart Webby works great. I thought I'd pass this along, it can be used to easily validate the email field of your contact, comment, etc. [...]...
- Expand/Collapse Browser Compatible InfoPath Forms Do you have an InfoPath form that is browser compatible that needs to be trimmed down? Hide some sections with this method of creating expand/collapse, +/- , and hide/show, option buttons within InfoPath forms limited to browser compatibility. 1. Execute InfoPath 2007 and Design a Form Template... 2. For this example we will design [...]...
DLOCC Socials