FormLess - style agnostic and auto-validating forms

January 1st, 2009

Creating 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 Screenshot of FormLess demo application

5 Responses to “FormLess - style agnostic and auto-validating forms”

  1. Timm Says:

    i am very glad to have read this article if u have helped me again a great deal of knowledge on this subject i would love to read more of ur article thank u so much for posting this article

  2. metal detector Says:

    I feel this article is very good……. It’s not only interesting; it helps us readers to ponder on the subject. I m very impressed with your work, and I look forward for more of it…. Congratulations on your good work….

  3. resveratrol Says:

    The style anostic scripts are really worked good and thank you for posting this scripts.

  4. AllieJefferson Says:

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/narcvs/blog.narcvs.com/wp-includes/kses.php on line 932

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/narcvs/blog.narcvs.com/wp-includes/kses.php on line 933

    I opine that to receive the http://www.lowest-rate-loans.com from creditors you should have a good reason. However, one time I’ve received a auto loan, because I was willing to buy a house.

  5. Outsourceable PHP Says:

    I would like to say “wow” what a inspiring post. This is really great. Keep doing what you’re doing!!