search

acacha / forms

Form objects pattern implementation for Javascript.
6 stars 1 forks source link
form form-objects form-validation forms vue

readme

Downloads Version License

Acacha forms

Form objects pattern implementation for Javascript.

Installation

npm install acacha-forms --save

Or you can use unpkg in your html files:

<script src="https://unpkg.com/acacha-forms/dist/acacha-forms.min.js"></script>

Usage

See also examples folder with full code examples

ES6 imports

After package installation you could use this package using ES6 import:

import Form from 'acacha-forms'

Then you can create any form object using constructor, for example a Register User form:

let form = new Form( { name: 'Sergi Tur', email: 'sergiturbadenas@gmail.com', password: '123456', password_confirmation: '123456', terms: 'true' } )

You can also pass a FormData object to constructor:

let form = new AcachaForm(new FormData(document.getElementById('registerForm')))

And then use form methods like post to submit form:

form.post('/register')
  .then( response => {
    console.log('Register done!')
    //do what you need to do if register is ok
  })
  .catch( error => {
    console.log('Register error!')
    console.log(form.errors.all())
  })

See a full example using vue.js at examples/es6 folder.

Node.js require

After package installation you could use this package using require:

var AcachaForm = require('../lib/acacha-forms.min.js')

var API_URL = 'http://localhost:3000/users'

var form = new AcachaForm({
  name: 'Sergi Tur',
  email: 'sergiturbadenas@gmail.com',
  password: '123456',
  password_confirmation: '123456',
  terms: 'true'
})

form.post(API_URL)
  .then(response => {
    console.log('Register done!')
  })
  .catch(error => {
    console.log('Register error! : ' + error)
    console.log(form.errors.all())
  })

See a full example using vue.js at examples/node folder.

Browser

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
...

<form onsubmit="event.preventDefault(); register()" id="registerForm">
    <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="Full name" name="name">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
    </div>
    <div class="form-group has-feedback">
        <input type="email" class="form-control" placeholder="Email" name="email">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
    </div>
    <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="Password" name="password">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
    </div>
    <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="Retype password" name="confirmation_password">
        <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
    </div>
    <div class="row">
        <div class="col-xs-8">
            <div class="checkbox icheck">
                <label>
                    <input type="checkbox" name="terms"> I agree to the <a href="#">terms</a>
                </label>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
            <button type="submit" class="btn btn-primary btn-block btn-flat">Register</button>
        </div>
        <!-- /.col -->
    </div>
</form>
...

<script src="https://github.com/acacha/forms/raw/master/./lib/acacha-forms.min.js"></script>
<script src="https://github.com/acacha/forms/raw/master/register.js"></script>
</body>
</html>

Where register.js:

/* globals AcachaForm FormData $ */

/**
 * Submit register form.
 *
 * @param errors
 */
function register () { // eslint-disable-line no-unused-vars
  clearErrors()

  const API_URL = 'http://localhost:3000/users'

  let form = new AcachaForm(new FormData(document.getElementById('registerForm')))

  form.post(API_URL)
    .then(response => {
      console.log('Register done!')
      $('#success').show()
    })
    .catch(error => {
      console.log('Register error! : ' + error)
      console.log(form.errors)
      showErrors(form.errors.all())
    })
}

/**
 * Clear errors.
 *
 * @param errors
 */
function clearErrors (errors) {
  $('#success').hide()
  $('#errors').hide()
  $('#errors ul').empty()
}

/**
 * Show errors.
 *
 * @param errors
 */
function showErrors (errors) {
  $.each(errors, function (index, value) {
    $('#errors ul').append('<li>' + value + '</li>')
  })
  $('#errors').show()
}

See a full example using vue.js at examples/browser folder.

Examples

See examples folder. Three examples are provided:

All three examples requires to work a "server". You can execute the server provider al server folder which uses json-server.

Server

First remember to run the server example. Run the server typing:

cd examples/server
npm install
node server.js

Node.js

First remember to run the server example. Run the browser example typing:

cd examples/node
npm install
node index.js

Browser

First remember to run the server example. Run the browser example typing:

cd examples/browser
npm install
cd ..
http-server .

An open browser/index.html file in your favourite browser.

es6

First remember to run the server example. Run the es6 (with vue.js) example typing:

cd examples/es6
npm install
npm run dev

And open URL http://localhost:8080

Optional. Toastr error messages

You can active to show toastr errors activating second parameter on constructor:

let form = new AcachaForm(new FormData(document.getElementById('registerForm')),true)

Then any error except 422 validation errors will show a Gritter/Toast with an error message.

IMPORTANT: Remember to add toastr.css to your project before using this option.

See browser example to see how to import toastr js and css.

About Form objects pattern

More info about this pattern at:

Other similar packages or software

Laracasts

This video series:

Inspired the creation of this package. Also Laravel Spark .

Resources