DatePicker
) to ensure consistency for each field. Horizontal Form
<p class="hx-header-small">Horizontal Form</p>
<form id="horizontal-form"></form>
var form = new hx.Form('#horizontal-form', { featureFlags: { useUpdatedStructure: true } })
.addText('Text A', { placeholder: 'Text A' })
.addText('Text B', { required: true, placeholder: 'Text B' })
.addButton('Cancel', () => console.log('Clicked Cancel'))
.addSubmit('Submit', undefined, undefined, { context: 'primary' })
.on('submit', function (data) {console.log(data)})
Vertical Form
Vertical forms are intended for use inside containers like Modals.
<p class="hx-header-small">Vertical Form</p>
<p>Vertical forms are intended for use inside containers like Modals. </p>
<form id="vertical-form"></form>
var form = new hx.Form('#vertical-form', { featureFlags: { useUpdatedStructure: true, displayVertical: true } })
.addText('Text A', { placeholder: 'Text A' })
.addText('Text B', { required: true, placeholder: 'Text B' })
.addButton('Cancel', () => console.log('Clicked Cancel'))
.addSubmit('Submit', undefined, undefined, { context: 'primary' })
.on('submit', function (data) {console.log(data)})
Full Form
This form is designed as an example of all the components. It's displayed vertically to account for the narrow column of the documentation
<p class="hx-header-small">Full Form</p>
<p>This form is designed as an example of all the components. It's displayed vertically to account for the narrow column of the documentation</p>
<form id="full-form"></form>
var form = new hx.Form('#full-form', { featureFlags: { useUpdatedStructure: true, displayVertical: true } })
.addText('Text', { required: true, placeholder: 'Name' })
.addTextArea('Text Area', { placeholder: 'Name' })
.addEmail('Email', { required: true, placeholder: 'your.name@ocado.com' })
.addUrl('Url', { placeholder: 'http://www.example.co.uk/' }) // Allows blank or valid URL (with http:// prefix)
.addNumber('Number', {required: true})
.addPicker('Select', ['red', 'green', 'blue'])
.addCheckbox('Checkbox')
.addPassword('Password')
.addRadio('Radio', ['One', 'Two', 'Three'])
.addTagInput('Tag Input')
.addFileInput('File Input')
.addDatePicker('Date Picker')
.addTimePicker('Time Picker')
.addDateTimePicker('Date Time Picker')
.addButton('Cancel', () => console.log('Clicked Cancel'))
.addSubmit('Submit', undefined, undefined, { context: 'primary' })
.on('submit', function (data) {console.log(data)})
"Font Awesome 5 Free"
font to be available on the page autocompleteData
autocompleteOptions
disabled(property, disabled)
method. hidden(property, hidden)
method. var validator = function(e){
if(e.target.value.length < 5){
"Please enter text longer than 5 characters"
}
}
disabled(property, disabled)
method. hidden(property, hidden)
method. var validator = function(e){
if(e.target.value.length < 5){
"Please enter text longer than 5 characters"
}
}
disabled(property, disabled)
method. hidden(property, hidden)
method. var validator = function(e){
if(e.target.value.length < 5){
"Please enter text longer than 5 characters"
}
}
disabled(property, disabled)
method. hidden(property, hidden)
method. var validator = function(e){
if(e.target.value.length < 5){
"Please enter text longer than 5 characters"
}
}
disabled(property, disabled)
method. hidden(property, hidden)
method. var validator = function(e){
if(e.target.value.length < 5){
"Please enter text longer than 5 characters"
}
}
disabled(property, disabled)
method. hidden(property, hidden)
method. disabled(property, disabled)
method. hidden(property, hidden)
method. disabled(property, disabled)
method. hidden(property, hidden)
method. disabled(property, disabled)
method. hidden(property, hidden)
method. disabled(property, disabled)
method. hidden(property, hidden)
method. disabled(property, disabled)
method. hidden(property, hidden)
method. disabled(property, disabled)
method. hidden(property, hidden)
method. var validator = function(e){
if(e.target.value.length < 5){
"Please enter text longer than 5 characters"
}
}
[ "Hue", "Saturation", "Lightness"]
var values = [
{ text: 'Hue', value: 'hue' } ,
{ text: 'Saturation', value: 'saturation'},
{ text: 'Lightness', value: 'lightness'}
];
form.addSelect('Select', values)
disabled(property, disabled)
method. hidden(property, hidden)
method. form.submit()
. Useful for setting custom error messages for properties before submitting the form. text
argumenthx.Toggle
field. disabled(property, disabled)
method. hidden(property, hidden)
method. hx.Toggle
prototype constructor for the available options. hx.FileInput
field. disabled(property, disabled)
method. hx.FileInput
prototype constructor for the available options. hidden(property, hidden)
method. {
'Field 1': 25,
'Field 2': 'green',
'Field 3': true,
'Field 4': 'Two'
}
{
'Field 1': 25,
'Field 2': 'green',
'Field 3': true,
'Field 4': 'Two'
}
form.errorMessage('Text', 'Please enter something sensible') // Form will not validate with message 'Please enter something sensible'
form.errorMessage('Text', undefined) // Clears validation message.