mithril-form
v1.3.3
Published
Form model for Mithril.js
Downloads
21
Readme
DEPRECATED IN FAVOR OF powerform
Introduction
A form model for Mithril.js. Used to be part of mithril-ui.
Installation
npm
npm install mithril-form
Bower
bower install mithril-form
Validation
mithril-form
uses validate.js for validation.
Quick walk-through
> import Form from "mithril-form"
// create form
> let form = new Form({
.. "username": {presence: true},
.. "password": {presence: true},
.. "confirmPassword": {equality: "password"}})
// assign values to fields
> form.username("ausername")
> form.password("apassword")
> form.confirmPassword("bpassword")
// per field validation
> form.username.isValid()
true
> form.confirmPassword.isValid()
false
> form.confirmPassword.errors()
[ 'Confirm password is not equal to password' ]
// validate all the fields at once
> form.isValid()
false
> form.errors()
{ username: undefined,
password: undefined,
confirmPassword: [ 'Confirm password is not equal to password' ] }
API
Creating new form
let form = new Form({name: {presence: true}})
Set default value
let form = new Form({name: {presence: true, default: "aname"}})
form.name() // "aname"
Form methods
.isValid()
form.name("")
// check validity without setting errors
form.isValid(false) // false
form.errors() // {name: ""}
// check validity and set errors
form.isValid()
form.errors() // {name: ['Name can\'t be blank]}
.isDirty()
Returns true
if form has been modified else returns false
.
.reset()
Resets all the fields.
.errors()
Gets or sets errors on fields.
One should either call .isValid()
or .setAndValidate()
to set errors.
form.name("")
form.isValid() // false
form.errors() // {name: ['Name can\'t be blank]}
form.errors({name: ["a error"]})
form.errors() // {name: ["a error"]}
.data()
Returns the key-value paris of fields and their respective values.
Per field methods
Field itself is getter/setter.
form.name("bname")
form.name() // bname
.isValid()
Same as form.isValid
.isDirty()
Same as form.isDirty()
.reset()
Same as form.reset()
.errors()
Gets or sets errors.
form.name("")
form.name.isValid() // false
form.name.errors() // ['Name can\'t be blank]
form.name.errors(['a error'])
form.name.errors() // ['a error']
.setAndValidate()
It sets the value as well as validates the field.
form.name.setAndValidate("")
form.errors() // ['Name can\'t be blank]
Modifier and Cleaner
Use modifier
and cleaner
to decorate and clean input data respectively.
Modifier come handy in situations like automatically inserting -
(dash) inbetween credit card input,
capitaling user's name, etc. Cleaner is used for cleaning modified data if necessary.
isValid
uses cleaner
before validating the fields.
Uage
var form = new Form({fullName: {modifier: function (newValue, oldValue) {
...
return modifiedValue;
},
cleaner: function (value) {
...
return cleanedValue;
}}});
form.fullName("super man")
form.fullName() // modified name
form.data() // {fullName: cleaned name}
Using it with Mithril.js
let signup = {
controller: function () {
return {
form: new Form({
username: {presence: true},
password: {presence: true},
confirmPassword: {presence: true, equality: "password"}}),
submit: function () {
if(!this.form.isValid()) return
SignupAPI(this.form.data())
.then((res) => {
m.route("/login/")})
["catch"]((errors) => {
this.form.errors(errors)})
.then(()=> m.redraw())}
}
},
view: function (ctrl) {
return m("form",
m("input", {
placeholder: "Username",
onkeypress: m.withAttr("value", ctrl.form.username),
onchange: ctrl.form.username.isValid}),
_.map(ctrl.form.username.errors(), (error) => {
return m("p.error", error)}),
m("input", {
placeholder: "Password",
onkeypress: m.withAttr("value", ctrl.form.password),
onchange: ctrl.form.password.isValid}),
_.map(ctrl.form.password.errors(), (error) => {
return m("p.error", error)}),
m("input", {
placeholder: "Confirm Password",
onkeypress: m.withAttr("value", ctrl.form.confirmPassword),
onchange: ctrl.form.confirmPassword.isValid}),
_.map(ctrl.form.confirmPassword.errors(), (error) => {
return m("p.error", error)}),
m("button", {
disabled: !ctrl.form.isValid(false),
onclick: ctrl.submit.bind(ctrl)}, "Submit"))
}
}