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:
- WordPress: If URL is Homepage then do this… Question: In WordPress how to I make sure the page loaded is the homepage URL and display some data if the standard WordPress Conditional Tags are not working for my theme?! Answer: Here's a quick snippet of code that will give you an option to do something if these WordPress basic conditional tags are not [...]...
- jFlow Slider Auto Slider with Pause Functionality UPDATE: Please visit the new jFlow Plus article for the latest version's documentation, download and demo. The following article is no longer supported: Why jFlow is a Good Slider jFlow is a very light-weight slider. If you've been using sliders in your web design for some time perhaps you've had experiences with a few jQuery [...]...
- 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 [...]...
- 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