FormLess - style agnostic and auto-validating forms
Thursday, January 1st, 2009Creating HTML forms can be a drag. Validating the form input is even worse. I wrote up a javascript utility to demonstrate how easy and enjoyable it could (should) be to create forms. Check out the demo. You create a form with:
new FormLess('form-container-element-id', items);
where items is an array of objects. Each item requires at least a name and a type, but could also take an array of options or a validation function that gets called to validate the value of that item.
items = [{ name : 'Gender', type : 'select', options : ['None of your business', 'Male', 'Female'], validate : function(data) { return data && data != 'None of your business' } }]
Each time an item’s value changes, the validation function gets called for that item. If a validation function returns false, the item gets marked as invalid. Valid and invalid items can be styled however you please:
.valid { background-color : green; } .invalid { background-color : red; }
When the form is submitted, each item gets has its validation function called. If all validation functions pass, the submit function gets called along with a key-value object containing the items names and values. This tool has not been tested across browsers - it’s mostly a demonstration of how easy it should be to gather and handle user-entered data. Check out the demo