Form objects pattern implementation for Javascript.
npm install acacha-forms --saveOr you can use unpkg in your html files:
<script src="https://unpkg.com/acacha-forms/dist/acacha-forms.min.js"></script>See also examples folder with full code examples
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.
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.
<!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="../lib/acacha-forms.min.js"></script>
<script src="./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.
See examples folder. Three examples are provided:
- browser: Example of how to use use this library in a simple web page.
- node: Example of use use this library using node.js require.
- es6: Example of use use this library using import es6 sintax (using vuejs framework).
All three examples requires to work a "server". You can execute the server provider al server folder which uses json-server.
First remember to run the server example. Run the server typing:
cd examples/server
npm install
node server.jsFirst remember to run the server example. Run the browser example typing:
cd examples/node
npm install
node index.jsFirst 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.
First remember to run the server example. Run the es6 (with vue.js) example typing:
cd examples/es6
npm install
npm run devAnd open URL http://localhost:8080
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.
More info about this pattern at:
- http://crushlovely.com/journal/7-patterns-to-refactor-javascript-applications-form-objects/
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21
- https://github.com/laracasts/Vue-Forms
- https://github.com/edstevo/laravel-vue-form
- Laravel Spark : see more info about forms at docs.
This video series:
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21
Inspired the creation of this package. Also Laravel Spark .
- Form Objects at acacha.org wiki: in Catalan Language
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20
- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21
- https://github.com/laracasts/Vue-Forms
- https://github.com/edstevo/laravel-vue-form
- https://github.com/acacha/adminlte-laravel