IO - ultimate javscript form data control and validation

Web forms make the web an interactive place, and drive business centric applications. Giving your users and clients an awesome and easy web form expierence shouldn't be difficult, and it doesn't have to be. Using IO you can easily build efficient self updating forms (think google docs) or simply save resources by limiting data communication to strictly updated data. Easily provide matching criteria for inputs and auto-toggle error messages and the ability to ask IO if the form has an error.

All data returned from IO is in the form of an object with the keys being the name of the input/select/checkbox/radio/textarea and its corresponding value the value of the input.

Check out a jsfiddle here http://jsfiddle.net/jbhamilton/obrL058h/

Get me the data!

Get a containers data:

var data = IO.get('.data-wrapper');

Get me only the changed data!

Initialize the container to sets it cache (you can do this multiple times, hence after you have sent a payload off to the server and you know the changes have been commited to the database)

```javascript IO.set('.data-wrapper'); ```

Get the data that has changed in the form since the last call to IO.set()

var data = IO.changes('.data-wrapper');

Tell me when data is changed!

Provide a callback function to receive changes as they happen

IO.subscribe('.data-wrapper',function(data){
   //do something with your data
   //log it for now
   console.log(data);
});

Those darn users always enter such silly things

Data is important and needs to adhere to some standards, so make it so!

Using the match attribute on an element you can force data to adhere to some standards. You can either use our standard provided regular expressions keywords, provide your own regular expression, or even add up new defaults or overwrite the standard defaults.

Start by telling IO that your container is watching for errors

<div class='data-wrapper' ioerrors>...</div>

On your input/select/textarea provide a match attribute

<input type='text' name='company' match='^[a-zA-Z\s]+$'>

You can use the default provided keywords for your matching

keyword	regexp
alpha	^[a-zA-Z\s-]+$
alpha_numeric	^[a-zA-Z\s-0-9]+$
integer	^[-0-9]+$
numeric	^[-0-9.]+$
all	'[.]*

You can add your own:

IO.patterns.your_pattern = 'your regex pattern';

Does your form have an error?

Before sending data off to the server you might want to check if your form has an error

```javascript if(IO.hasError('.data-wrapper')) console.log('Houston we have an error'); ```

Toggle an error message

After your input provide an element with the class '.io-error' and it will display when the input does not match its match condition

```html

Your company name must only be letters and numbers

```

Requirements

jQuery *

jbhamilton/IO