https://github.com/hacknlove/semantic-form

semantic-ui form for Meteor made easy
https://github.com/hacknlove/semantic-form

Last synced: over 1 year ago
JSON representation

semantic-ui form for Meteor made easy

• Host: GitHub
• URL: https://github.com/hacknlove/semantic-form
• Owner: hacknlove
• Created: 2016-08-19T17:45:03.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-06-19T09:55:15.000Z (almost 9 years ago)
• Last Synced: 2025-01-08T20:51:04.800Z (over 1 year ago)
• Language: JavaScript
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# hacknlove:semantic-form

## use:

### Template

    {{#semanticForm name="foo" fields=bar ready=baz values=qux}}

      

        

        

        
 

      

    {{/semanticForm}}


* `name` (optional but recomended) sets the `_id` of the documents in the Template.semanticForm.current and Template.semanticForm.reload that host the current values in the form and those who has been changed` you must set a name if you want your form keep the values that has been changed in the form but has not been saved, even if the template is destroyed

* `fields` the fields object to be passed to the `$(form).form({fields: bar})`

* `ready` semanticForm will wait until `ready` was not falsable

* `values` has the values with what semanticForm will populate the form widgets by their names

### Events:

* `success` fired when you submit the form, and it pass the validation

* `failure` fired when you submit the form, and it does not pass the validation

      Template.foo.events({

        'form success': function (event, instance, data, add) {

          // data <= $('form').form('get values')

          // add.prompt('bar') => mark input as error

          // add.errors(['bla', 'blabla', ...]) =>  show the errors

        }

      })

### Special validation

On top of the semantic-ui validations, semantic-form has the `event` validation

**js**

    Template.foo.helpers({

      values: {...},

      fields: {

        bar: {

          rules: [

            {

              type: 'event[baz]',

              prompt: 'some error message'

            }

          ]

        }

      }

    })

    Template.foo.onRendered(function () {

      this.$('input[name=bar]').on('validate', function (event, instance, param) {

        // here you can do your custom validation accesing your Template, the doom, whatever you need, but remember that it must be synchronous

      })

    })

**html**

    

      {{#semanticForm name="qux" fields=fields ready=true values=values}}

        

          


            BAR

            

          

          


        

      {{/semanticForm}}