ampersand-input-view v7.0.0
ampersand-input-view
Lead Maintainer: Christopher Dieringer (@cdaringe)
Purpose
A view module for intelligently rendering and validating input. Works well with ampersand-form-view.
It does the following:
- Automatically shows/hides error messages based on tests
- Will not show error messages pre-submit, or if it's never had a valid value. This lets people tab-through a form without triggering a bunch of error messages.
- Live-validates, to always report if in valid state. But only shows messages when sane to do so.
- Only shows first failed message. Then, as the user corrects, updates and validates against all tests, showing appropriate message, until all tests pass.
It's built on ampersand-view, so you can use it with extend
as expected.
install
npm install ampersand-input-view
example
var FormView = require('ampersand-form-view');
var InputView = require('ampersand-input-view');
module.exports = FormView.extend({
fields: function () {
return [
new InputView({
label: 'Address',
name: 'address',
value: this.model.address || '',
required: false,
placeholder: '2000 Avenue of the Stars, Los Angeles CA',
parent: this
})
];
}
});
API Reference
extend AmpersandInputView.extend({ })
Since this view is based on ampersand-state, it can be extended in the same way.
To create an InputView
class of your own, you extend AmpersandInputView
and provide instance properties and options for your class. Here, you will typically pass any properties (props
, session
, and derived
) of your state class, and any methods to be attached to instances of your class.
Note: If you want to add initialize()
, remember that it's overriding InputView's own initialize()
. Thus, you should call the parent's initialize()
manually:
var AmpersandInputView = require('ampersand-input-view');
var MyCustomInput = AmpersandInputView.extend({
initialize: function () {
// call its parent's initialize manually
AmpersandInputView.prototype.initialize.apply(this, arguments);
// do whatever else you need to do on init here
}
});
constructor/initialize new AmpersandInputView([opts])
When creating an instance of an InputView
, you can pass in the initial values of the attributes which will be set
on the state. Unless extraProperties
is set to allow
, you will need to have defined these attributes in props
or session
.
opts
tests
(default:[]
): test function to run on input (more below).name
: the input'sname
attribute's value. Used when reporting to parent form.type
(default:'text'
): input type to use, can be any valid HTML5 input type.value
: initial value for the<input>
.template
: a custom template to use (see 'template' section, below, for more).placeholder
: (optional) "placeholder text" for the input.el
: (optional) element if you want to render it into a specific exisiting element pass it on initialization.required
(default:true
): whether this field is required or not.readonly
(default:false
): whether this field is read only or not.autofocus
(default:false
): whether this field automatically gets focus on page load or not.requiredMessage
(default:'This field is required'
): message to use if required and empty.validClass
(default:'input-valid'
): class to apply to input if valid (see below for customizing where this is applied).invalidClass
(default:'input-invalid'
): class to apply to input if invalid (see below for customizing where this is applied).parent
: a View instance to use as theparent
for this input. If your InputView is in a FormView, this is automatically set for you.beforeSubmit
: function called by ampersand-form-view during submit. By default this runs the tests and displays error messages.tabindex
(default:0
): Specify the tab index number for your field (integer).
render inputView.render()
Renders the inputView. This is called automatically if your inputView is used within a parent ampersand-form-view.
template inputView.template
This can either be customized by using extend
, or by passing in a template
on instantiation.
It can be a function that returns a string of HTML or DOM element--or just an plain old HTML string.
But whatever it is, the resulting HTML should contain the following hooks:
- an
<input>
or<textarea>
element - an element with a
data-hook="label"
attribute - an element with a
data-hook="message-container"
attribute (this we'll show/hide) - an element with a
data-hook="message-text"
attribute (where message text goes for error)
Creating a new class:
// creating a custom input that has an alternate template
var CustomInput = AmpersandInputView.extend({
template: [
'<label>',
'<input class="form-input">',
'<span data-hook="label"></span>',
'<div data-hook="message-container" class="message message-below message-error">',
'<p data-hook="message-text"></p>',
'</div>',
'</label>'
].join('')
});
// Then any instances of that would have it
var myCustomInput = new CustomInput();
Setting the template when instantiating it:
// Or you can also pass it in when creating the instance
var myInput = new AmpersandInputView({
template: myCustomTemplateStringOrFunction
});
value new AmpersandInputView({ value: 'something' })
If you pass value
on instantiation, it will be set on the <input>
element (and also tracked as startingValue
).
This is also the value that will be reverted to if we call .reset()
on the input.
var myInput = new AmpersandInputView({
name: 'company name',
value: '&yet'
});
myInput.render();
console.log(myInput.input.value); //=> '&yet'
myInput.setValue('something else');
console.log(myInput.input.value); //=> 'something else'
myInput.setValue('something else');
myInput.reset();
console.log(myInput.input.value); //=> '&yet'
Customizing the view
Custom calculated output value
If you need to decouple what the user puts into the form from the resulting value, you can do that by overriding the value
derived property.
For example, consider a validated address input. You may have a single text input for address, which you can attempt to match to a real known address with an API call. So, you have a single <input>
, but you want the inputView's value
to be an object returned from that API.
Do it by overriding the value
derived property as follows:
var VerifiedAddressInput = AmpersandInputView.extend({
initialize: function () {
// call parent constructor
AmpersandInputView.prototype.initialize.apply(this, arguments);
// listen for changes to input value
this.on('change:inputValue', this.validateAddress, this);
},
props: {
verifiedAddress: {
type: 'object'
}
},
derived: {
value: {
// in you want it re-calculated
// when the user changes input
// make it dependent on `inputValue`
deps: ['verifiedAddress'],
fn: function () {
// calculate your value here
return this.verifiedAddress;
}
},
// you may also want to change what
// deterines if this field should be
// considerd valid. In this case, whether
// it has a validated address
valid: {
deps: ['value'],
fn: function () {
if (this.verifiedAddress) {
return true;
} else {
return false;
}
}
}
},
// run our address verification
validateAddress: function () {
// validate it against your API (up to you how)
validateIt(this.inputValue, function (result) {
this.verifiedAddress = result;
});
}
});
Setting valid/invalid classes
By default, validClass
and invalidClass
are set on either the input
or textarea
in the rendered template. This is done via a validityClassSelector
property that is used to find the elements to apply either validClass
or invalidClass
. You can set validityClassSelector
to have this class applied anywhere you need in your rendered template
For instance, this would set the class on the root label instead:
var CustomInput = InputView.extend({
validityClassSelector: 'label'
});
And this would set it on the root label and the message element
var CustomInput = InputView.extend({
validityClassSelector: 'label, [data-hook=message-text]'
});
tests InputView.extend({ tests: [test functions] });
or new InputView({ tests: [] })
You can provide tests inside extend
, or passed them in for initialize
.
This should be an array of test functions. The test functions will be called with the context of the inputView, and receive the input value
as the argument.
The tests should return an error message if invalid, and return a falsy value otherwise (or, simply not return at all).
var myInput = new InputView({
name: 'tweet',
label: 'Your Tweet',
tests: [
function (value) {
if (value.length > 140) {
return "A tweet can be no more than 140 characters";
}
}
]
});
Note: You can still do required: true
and pass tests. If you do, it will check if it's not empty first, and show the requiredMessage
error if it is.
Remember that the inputView will only show one error per field at a time. This is to minimize annoyance. We don't want to show "this field is required" and every other error if they just left it empty. We just show the first one that fails, then when they go to correct it, it will update to reflect the next failed test (if any).
setValue inputView.setValue([value], [skipValidation|bool])
Setter for value that will fire all appropriate handlers/tests. Can also be done by user input or setting value of input
manually.
Passing true
as second argument will skip validation. This is mainly for internal use.
Setting input.value on non-user input
This module assumes that the value of the input element will be set by the user. This is the only event that can be reliably listened for on an input element. If you have a third-party library (i.e. Bootstrap or jQuery) that is going to be affecting the input value directly you will need to let your model know about the change via setValue
.
var myInput = new InputView({
name: 'date'
});
myInput.render();
document.body.appendChild(myInput.el);
$('[name=address]').datepicker({
onSelect: function (newDate) {
myInput.setValue(newDate);
}
});
reset inputView.reset()
Set value to back original value. If you passed a value
when creating the view it will reset to that, otherwise to ''
.
clear inputView.clear()
Sets value to ''
no matter what previous values were.
gotchas
- Some browsers do not always fire a
change
event as expected. In these rare cases, validation may not occur when expected. Validation will occur regardless on form submission, specifically when this field'sbeforeSubmit
executes.
changelog
- 7.0.0
- Upgrade to &-view 10.x (@RickButler #74)
- Add
autofocus
option (@taketwo #73)
- 6.0.0
- Upgrade to &-view 9.x
- 5.1.0
- add
tabindex
- add
5.0.0
- Upgrade to &-view 8.x
- Add
readonly
option - dependency and test maintenance
4.0.5
- Handle uncaught input value changes beforeSubmit
- Add view convention tests, and update to pass them
4.0.0
- Remove
rootElementClass
in favor of a better validityClass selector - Listen to
change
instead ofblur
event - Reset error message state on
clear()
andreset()
- Allow
beforeSubmit
to be defined on initialization
- Remove
3.1.0 - Add ampersand-version for version tracking.
- 3.0.0 - Add API reference docs. Add
.clear()
,.reset()
methods. Makevalue
derived property. Fix #21 validity class issue. - 2.1.0 - Can now set
rootElementClass
. Add reset function #15. Allow setting0
as value #17. - 2.0.2 - Make sure templates can be passed in, in constructor.
credits
Created by @HenrikJoreteg.
license
MIT
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago