ampersand-checkbox-view
Lead Maintainer: Michael Garvin
overview
A view module for intelligently rendering and validating checkbox input. Works well with ampersand-form-view.
ampersand-checkbox-view extends ampersand-view, so you may further .extend({...})
it to your desire.
It does the following:
- Automatically shows/hides error message based on if the field is
required
. - Will only show error message checkbox is required and:
- trying to submit form and it's not checked.
- it has ever been checked and now isn't.
Part of the Ampersand.js toolkit for building clientside applications.
install
npm install ampersand-checkbox-view
example
var CheckboxView = ; var field = // form input `name` name: 'client_name' // You can replace the built-in template with your own. // just give it an html string. Make sure it has a single "root" element that contains: // - an `<input>` element // - an element with a `data-hook="label"` attribute // - an element with a `data-hook="message-container"` attribute (this we'll show/hide) // - an elememt with a `data-hook="message-text"` attribute (where message text goes for error) template: // some HTML string // Label name label: 'App Name' // optinal intial value if it has one value: true // or false // optional, this is the element that will be // replaced by this view. If you don't // give it one, it will create one. el: document // whether or not this field is required required: true // false by default // whether or not to disable this field disabled: false //false by default // class to set on input when input is valid validClass: 'input-valid' // <- that's the default // class to set on input when input is valid invalidClass: 'input-invalid' // <- that's the default // Message to use if error is that it's required // but no value was set. requiredMessage: 'This box must be checked.' // optional, you can pass in the parent view explicitly parent: someViewInstance // optional, called before form's submitCallback function called { console; }; // append it somewhere or use it in side an ampersand-form-viewdocument;
api
properties
Commonly accessed properties listed below. See the initialize()
function for additional properties available.
valid
(boolean)value
(boolean)startingValue
(boolean) - this is coerced from any initailvalue
provided during construction
functions
new CheckboxView()
- constructor- see the example for constructor options
clear()
- sugar for
view.setValue(false);
- sugar for
reset()
- sugar for
view.setValue(this.startingValue);
- sugar for
setValue([boolean])
- sets the value of the view. the view will always maintain a value of type
boolean
.
- sets the value of the view. the view will always maintain a value of type
changelog
- 5.0.0
- Upgrade to &-view 9.x
- 4.1.0
- Remove
domify
and using ampersand-viewrenderWithTemplate
- Remove
- 4.0.0
- Bump to ampersand-view 8.x
- 3.0.0
- Extend ampersand-view. Add support
autoRender
,clear
,reset
- Extend ampersand-view. Add support
credits
Created by @HenrikJoreteg.
license
MIT