SmartForms → input formatting and validation

MIT license. Check it out on github. Download here, the files you need are in the dist/ folder. Or,

bower install smartForm --save

Some good looking and usefull formatting and validation for phone, credit card and email inputs. There is a lot of argument about how email validation should be done; right here we're just validating the email input has minimum basic formatting. If you want to confirm that a given email address actually exists, you'll have to do that on your own.

Try it out

Phone and credit card fields auto-format on keyup events and validation is done manually with the button clicks.

Method List

SmartForms exposes the global object smartForm to access it's methods

Bonus! Caret Position Managment

If you want to format input text as you type, caret position becomes an issue as soon as you start using the arrow keys and delete key. To deal with this we provide you a setCaretPosition() method to keep things from getting screwy. You'll have to do a little work yourself, but it's easy.

Formatting Example

In the example above, we hook up the phone and credit card input elements with jQuery event delegation to watch the keyup event. Here's the code below.

            
        
                // set up some handles to get at the inputs easily
                var $phone = $('#phone');
                var $cc = $('#credit-card');

                // bind input formatting to the keyup event
                $('input').on('keyup', '', function(e) {

                    // to manage caret position, we have to get the current location
                    var caretPosition = this.selectionStart;

                    // figure out which input we're working with
                    var id = $(e.target).attr('id');

                    // here comes the fun part
                    if(id === 'phone') {
                        // get the input string
                        var txt = $phone.val();
                        // format our string
                        var sf = smartForm.formatPhone(txt, caretPosition);
                        // drop our formatted string in the input element
                        $phone.val(sf.string);
                        // make sure the caret position didn't get wonky
                        smartForm.setCaretPosition(this,sf.caretPosition);

                    } else if(id === 'credit-card') {
                        // get our input string for credit cards
                        var txt = $cc.val();
                        // we don't really need to fomat anything before we have four numbers
                        if(txt.length > 3) {
                            // format our string
                            sf = smartForm.formatCC(txt, caretPosition);
                            // post the formatted string to the user input element
                            $cc.val(sf.string);
                            // lets tell the user what kind of card we detected
                            $(e.target).siblings('.ccType').text(sf.cardType);
                            // set the caret position 
                            smartForm.setCaretPosition(this, caretPosition);
                        }

                    } 

                });
            
            
        

Validation Examples

In the test form at the top we call the validate methods on button click. Here's the code we used:

            
                
                // set up some handles to get at our inputs easily
                var $phone = $('#phone');
                var $cc = $('#credit-card');
                var $email = $('#email');

                $('button').on('click', '', function(e) {
                    
                    //  stop all the default actions we don't want 
                    e.preventDefault();
                    
                    // figure out which button got clicked
                    var id = $(e.target).attr('id');
                    
                    // do the right validation and post some user feedback!
                    if(id === 'emailValid') {
                        var isValid = smartForm.emailIsValid($email.val());
                        if(isValid) {
                            $(this).siblings('.isValid').text('looks valid!');
                        } else {
                            $(this).siblings('.isValid').text('this doesn\'t look right.');
                        }

                    } else if(id === 'ccValid') {
                        var isValid = smartForm.cardIsValid($cc.val());
                        if(isValid) {
                            $(this).siblings('.isValid').text('looks valid!');
                        } else {
                            $(this).siblings('.isValid').text('this doesn\'t look right.');
                        }

                    } else if(id === 'phoneValid') {
                        var isValid = smartForm.phoneIsValid($phone.val());
                        if(isValid) {
                            $(this).siblings('.isValid').text('looks valid!');
                        } else {
                            $(this).siblings('.isValid').text('this doesn\'t look right.');
                        }

                    }

                });