Skip to content
small form framework for javascript
JavaScript CoffeeScript
Find file
Pull request Compare This branch is even with andersoncardoso:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples
lib
src
tests
.gitignore
README.md
TODO.md
coffee_compiler.sh

README.md

(Disclaimer: This library is under development, which means it will change a lot. If you decide to use it be cautious, and be patient)

ReForm.js

This is a small library to work with forms on javascript. It uses (and aims to be used with) backbone.js.

Usage:

see the usage bellow:


FormView = ReForm.Form.extend
    fields: [
        {name: 'title', widget: ReForm.commonWidgets.TextWidget, label: 'Todo:'}
        {name: 'desc', widget: ReForm.commonWidgets.TextAreaWidget, label: 'Description:'}
    ]
    events:
        'success': 'onSuccess'
        'validation': 'onValidation'

    onSuccess: (data) ->
        console.dir data

    onValidation: ->
        # do some client-side validation ()
        if has_error
          @errors {key: 'error description'}
          return false
        else
          return true

$ () ->
    form = new FormView
        formId: 'some_id'
        model: new MyModel()

    $('#my-form-wrapper').html myForm.render().el


on the constructor it accepts a model (Backbone.Model), if the model is prepoluated, the form renders with the model data already loaded.

Methods:

*events:

submit, success, error

*form.save()

saves the data (uses model.save), This method is automatically called when you raise a 'submit' event. It raises a 'success' or 'error' event. To trigger the sucess the model.save should return a Http 200. To trigger a 'error' should return another Http status code (usually 400 Bad Request, for validation)

*form.set({title: 'some title', desc:'nonononoono'})

*form.get()

*form.get('title')

*form.errors()

*form.errors({title: 'Validations Msg'})

*form.cleanErrors()

*form.fields

the form fields, after render, have a 'instance' attribute so you play with the widget directly

Widgets

AnnoyingWidget = ReForm.Widget.extend
    template: """
    <input class="annoying" type="text" name="<%=name%>" id=id_"<%=name%>" value="<%=value%>">
    """
    behavior: ()->
        @$el.find('.annoying').click (evt) =>
            alert 'heey, stop it!!!'
            $(evt.target).blur()

You could have provided a template from the DOM example:

On my HTMl:
<script type="text/template" id="my-widget">
    ... my widget html here!
</script>
AnnoyingWidget = ReForm.Widget.extend
    template: $('#my-widget').html()
    behavior: ()->
       .... my widget custom js here (optional)

you can (and several times, must) also provide a .set(value) and .get() function, that know how to set and get values for this widget. The default is getting from the 'input' field the .val() attribute. If your widget is more elaborate please provide these methods

Copyright (copyleft):

created by Anderson Pierre Cardoso(2012) and licensed under the terms of the MIT license.

Something went wrong with that request. Please try again.