article:
JS Plugin: NVD3 Re-usable charts
article:
JS Plugin: jToday

JS Plugin: Ideal Forms

Advertisement

"Ideal Forms is the ultimate framework for building and validating responsive HTML5 forms."


Features

- Fully responsive (AKA adaptive, adapts to the container, no css media queries needed).
- Keyboard support.
- Every input type can be customized including select, radio, checkbox and file.
- Custom datepicker using jQuery UI (with fallback)
- "On the spot" validation.
- Localization
- HTML5 placeholder for every browser.



Usage
- load jquery;
- load js/min/jquery.idealforms.min.js plugin
- load css/jquery.idealforms.css stylesheet
- load jQuery UI for datepicker support
- replace your document's opening <html> tag with the following conditional comments. This will load the appropiate fixes for all supported IE versions:
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
-  load an HTML5 shim for IE8 unless you're using Modernizr which already has a shim
- to localize Ideal Forms in your language, load the corresponding file from js/i18n after loading the plugin.
- finally, call Ideal Forms on each form separately. Assign each form to a variable to have access to the public methods.
var $myform = $('#my-form').idealforms({ options });


Sample

With the markup provided above you'd call the plugin like this:

$myform.idealforms({
  inputs: {
    'username': {
      filters: 'required username exclude',
      data: {
        exclude: ['user', 'username', 'admin']
      }
    },
    'date': {
      filters: 'date'
    },
    'comments': {
      filters: 'min max',
      data: {
        min: 50
        max: 200
      }
    },
    'colors': {
      filters: 'exclude',
      data: {
        exclude: ['default']
      },
      errors: {
        exclude: 'Choose a color from the list.'
      }
    },
    'langs[]': {
      filters: 'min',
      data: {
        min: 2
      },
      errors: {
        min: 'Check at least <strong>2</strong> languages.'
      }
    },
    'options': {
      filters: 'min'
      data: {
        min: 1
      },
      errors: {
        min: 'Check only <strong>1</strong> option.'
      }
    }
  }
});


Custom UI elements

List of all the Ideal Forms UI elements that can be customized:

-Tabs
-Labels
-Headings
-Separators
-Icons
-Errors
-Text inputs
-Buttons
-Select dropdowns
-Radios
-Checkboxes
-Datepicker



Video





Screenshots

Plugin: Ideal Forms

Plugin: Ideal Forms

Plugin: Ideal Forms




source
github
download

Advertisement
Tags: plugin, form, jquery, validation, develop

Leave a Comment

No Comment

© Creative3x Ltd.