init
option that allows to perform initialization tasks before adding fields.
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
// ...
}
,
plugins
:
{
// ...
}
,
init
:
(
instance
)
=>
{
instance
.
on
(
'plugins.message.placed'
,
function
(
e
)
{
// Adjust the message placement before adding fields
}
)
;
}
,
}
)
;
FormValidation
.
formValidation
(
)
.
on
(
'core.form.notvalidated'
,
function
(
e
)
{
console
.
log
(
e
.
formValidation
)
;
}
)
.
on
(
'core.form.validating'
,
function
(
e
)
{
console
.
log
(
e
.
formValidation
)
;
}
)
.
on
(
'core.form.valid'
,
function
(
e
)
{
console
.
log
(
e
.
formValidation
)
;
}
)
.
on
(
'core.form.invalid'
,
function
(
e
)
{
console
.
log
(
e
.
formValidation
)
;
}
)
;
Wizard
(
{
isStepSkipped
:
function
(
skipStepProps
)
{
// skipStepProps.currentStep: The current step
// skipStepProps.numSteps: The total number of steps
// skipStepProps.targetStep: The target step
// Returns `true` if you want to skip the step
}
,
}
)
;
Wizard
(
{
isFieldExcluded
:
function
(
field
:
string
,
element
:
HTMLElement
,
elements
:
HTMLElement
[
]
)
// field: The field name
// element: The field element
// elements: The field elements
// Returns `true` if you want to exclude the field, so it won't be validated
}
,
}
)
ValidateFunction
to
ValidateFunction
Core
provides new
setFieldOptions method
to set the options for given field
trim
option which is
false
by default
<
form
id
=
"
demoForm
"
>
...
form
>
<
button
type
=
"
button
"
id
=
"
externalButton
"
/>
buttons
option to the
SubmitButton plugin
.It is a function that accepts the current form element, and returns the list of button elements.
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
...
,
plugins
:
new
FormValidation
.
plugins
.
SubmitButton
(
{
buttons
:
function
(
form
)
{
return
[
]
.
slice
.
call
(
document
.
getElementById
(
'externalButton'
)
)
;
}
,
}
)
,
}
)
;
buttons
option will query all submit buttons (
type="submit"
) inside the form.
selector
option is removed.
data-fv-between___inclusive="false"
to
inclusive: 'false'
, not
inclusive: false
.
selector
option of the
SubmitButton plugin
is removed.
selector
of
SubmitButton plugin
, then you need to replace it with the
buttons
option.
const
strongPassword
=
function
(
)
{
return
{
validate
:
function
(
input
)
{
const
value
=
input
.
value
;
if
(
value
===
''
)
{
return
{
valid
:
true
,
}
;
}
if
(
value
.
length
<
8
)
{
return
{
valid
:
false
,
message
:
{
en_US
:
'The password must have at least 8 characters'
,
vi_VN
:
'Máºt khẩu phải có Ãt nhất 8 ký tá»±'
,
}
,
}
;
}
...
}
}
;
}
;
normalizeResult
method which can cause an exception
getStatues()
method of
FieldStatus plugin
is renamed to
getStatuses()
getStatues
of
FieldStatus plugin
, then you need to change to
getStatuses
.
const
demoForm
=
document
.
getElementById
(
'demoForm'
)
;
// Submit button
const
submitButton
=
demoForm
.
querySelector
(
'[name="signup"]'
)
;
const
fv
=
FormValidation
.
formValidation
(
demoForm
,
{
fields
:
{
...
}
,
plugins
:
{
fieldStatus
:
new
FormValidation
.
plugins
.
FieldStatus
(
{
onStatusChanged
:
function
(
areFieldsValid
)
{
// areFieldsValid is true if all fields are valid
areFieldsValid
// Enable the submit button
// so user has a chance to submit the form again
?
submitButton
.
removeAttribute
(
'disabled'
)
// Disable the submit button
:
submitButton
.
setAttribute
(
'disabled'
,
'disabled'
)
;
}
}
)
,
...
}
}
)
;
aspNetButton
option provided by the
SubmitButton plugin
:
<
form
id
=
"
demoForm
"
runat
=
"
server
"
>
<
asp:
Button
ID
=
"
btnSubmit
"
runat
=
"
server
"
Text
=
"
Submit
"
OnClick
=
"
btnSubmit_OnClick
"
/>
form
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
const
demoForm
=
document
.
getElementById
(
'demoForm'
)
;
const
fv
=
FormValidation
.
formValidation
(
demoForm
,
{
fields
:
{
...
}
,
plugins
:
{
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
{
aspNetButton
:
true
,
}
)
,
}
}
)
;
}
)
;
script
>
Status
from this version, so please replace
Status
with the corresponding value. For example:
FormValidation.Status.Validating
must be replaced with string of
'Validating'
.
Status
with corresponding value:
| Replace | With |
|---|---|
FormValidation.Status.Ignored
|
'Ignored'
|
FormValidation.Status.Invalid
|
'Invalid'
|
FormValidation.Status.NotValidated
|
'NotValidated'
|
FormValidation.Status.Valid
|
'Valid'
|
FormValidation.Status.Validating
|
'Validating'
|
<
script
src
=
"
/vendors/formvalidation/dist/js/FormValidation.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/plugins/AutoFocus.min.js
"
>
script
>
<
form
id
=
"
demoForm
"
method
=
"
POST
"
data-fvp-trigger
=
"
true
"
data-fvp-trigger___class
=
"
FormValidation.plugins.Trigger
"
data-fvp-tachyons
=
"
true
"
data-fvp-tachyons___class
=
"
FormValidation.plugins.Tachyons
"
data-fvp-submit-button
=
"
true
"
data-fvp-submit-button___class
=
"
FormValidation.plugins.SubmitButton
"
data-fvp-icon
=
"
true
"
data-fvp-icon___class
=
"
FormValidation.plugins.Icon
"
data-fvp-icon___valid
=
"
fa fa-check
"
data-fvp-icon___invalid
=
"
fa fa-times
"
data-fvp-icon___validating
=
"
fa fa-refresh
"
>
...
form
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
const
form
=
document
.
getElementById
(
'demoForm'
)
;
FormValidation
.
formValidation
(
form
,
{
plugins
:
{
// You have to register the Declarative plugin only
declarative
:
new
FormValidation
.
plugins
.
Declarative
(
)
,
}
,
}
)
;
}
)
;
script
>
<
form
id
=
"
demoForm
"
>
...
form
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
const
form
=
document
.
getElementById
(
'demoForm'
)
;
FormValidation
.
formValidation
(
form
,
{
plugins
:
{
declarative
:
new
FormValidation
.
plugins
.
Declarative
(
)
,
// Other plugins
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
)
,
tachyons
:
new
FormValidation
.
plugins
.
Tachyons
(
)
,
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
)
,
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
,
}
)
,
}
,
}
)
;
}
)
;
script
>
id
package to save imports when using with ES6 module.
id
package if you only want to validate the identification number of particular country:
// You might need to change the importing path
import
id
from
'formvalidation/dist/es6/validators/id'
;
const
result
=
id
(
)
.
validate
(
{
value
:
...
,
options
:
{
country
:
'BR'
,
message
:
'The input is not a valid Brazilian identification number'
,
}
,
}
)
;
// You might need to change the importing path
import
brId
from
'formvalidation/dist/es6/validators/id/brId'
;
const
result
=
brId
(
)
.
validate
(
'An ID here'
)
;
vat
package to save imports when using with ES6 module.
excluded
option in v0.8.1 and earlier versions.
onPrefocus
option in the
AutoFocus plugin
. This option is useful when you want to activate the tab containing the first invalid field.
| Plugin | Supported CSS framework |
|---|---|
| Materialize plugin | MaterializeCSS v1.0.0-rc.2 |
| Milligram plugin | milligram v1.3.0 |
| Mini plugin | mini.css v3.0.0 |
| Mui plugin | MUI v0.9.39 |
| Turret plugin | turretcss v4.1.4 |
| Plugin | Supported CSS framework |
|---|---|
| Bootstrap plugin | Bootstrap v4.1.2 |
| Semantic plugin | Semantic UI v2.3.3 |
| Spectre plugin | Spectre v0.5.3 |
| Tachyons plugin | Tachyons v4.10.0 |
| Uikit plugin | UIKit v3.0.0-rc.8 |
delay
option that supports pending validation for a given number of seconds after user stops filling in the field.
min
,
max
options in the
date validator
accept a function returning a Date object or a string
timeout
option in the
Recaptcha plugin
. The captcha expiration will be handled by the plugin automatically
stoken
option in the
Recaptcha plugin
validator
parameter when setting the field status
FormValidation.utils.fetch()
method don't send the correct data for POST request
import
and integrate with JavaScript frameworks such as
React
,
Vue
,
Sapper
, etc.
const
result
=
FormValidation
.
validators
.
creditCard
(
)
.
validate
(
{
value
:
'340653705597107'
,
options
:
{
message
:
'The credit card number is not valid'
,
}
,
}
)
;
// result.valid === true
// result.meta.type === 'AMERICAN_EXPRESS'
// You might need to change the importing path
import
creditCard
from
'formvalidation/dist/es6/validators/creditCard'
;
const
result
=
creditCard
(
)
.
validate
(
{
value
:
'340653705597107'
,
options
:
{
message
:
'The credit card number is not valid'
,
}
,
}
)
;
// result.valid === true
// result.meta.type === 'AMERICAN_EXPRESS'
| Plugin | Support CSS framework |
|---|---|
| Bootstrap plugin | Bootstrap v4.1.1 |
| Bootstrap3 plugin | Boostrap v3.3.7 |
| Bulma plugin | Bulma v0.7.1 |
| Foundation plugin | Zurb Foundation v6.4.3 |
| Pure plugin | PureCSS v1.0.0 |
| Semantic plugin | Semantic UI v2.3.1 |
| Shoelace plugin | Shoelace v1.0.0-beta24 |
| Spectre plugin | Spectre v0.5.1 |
| Tachyons plugin | Tachyons v4.9.1 |
| Uikit plugin | UIKit v3.0.0-beta.42 |
<
div
class
=
"
fl w-100 bl bt b--light-gray
"
>
<
Framework
name
=
"
Bootstrap 4
"
url
=
"
/guide/plugins/bootstrap/
"
isNew
/>
<
Framework
name
=
"
Foundation
"
url
=
"
/guide/plugins/foundation/
"
/>
<
Framework
name
=
"
UIKit
"
url
=
"
/guide/plugins/uikit/
"
/>
div
>
<
div
class
=
"
fl w-100 bl b--light-gray
"
>
<
Framework
name
=
"
Semantic UI
"
url
=
"
/guide/plugins/semantic/
"
/>
<
Framework
name
=
"
PureCSS
"
url
=
"
/guide/plugins/pure/
"
/>
<
Framework
name
=
"
Bulma
"
url
=
"
/guide/plugins/bulma/
"
isNew
/>
div
>
<
div
class
=
"
fl w-100 bl b--light-gray
"
>
<
Framework
name
=
"
Shoelace
"
url
=
"
/guide/plugins/shoelace/
"
isNew
/>
<
Framework
name
=
"
Spectre
"
url
=
"
/guide/plugins/spectre/
"
isNew
/>
<
Framework
name
=
"
Tachyons
"
url
=
"
/guide/plugins/tachyons/
"
isNew
/>
div
>
include
!
Copy
button on the top right corner
postMessage()
method. No accessing the DOM directly as in the previous version.
| Options | Plugin |
|---|---|
autoFocus
|
AutoFocus plugin |
err: 'tooltip'
|
Tooltip plugin |
icon
|
Icon plugin |
row
|
Message plugin |
threshold
|
Trigger plugin |
trigger
|
Trigger plugin |
button
|
Removed |
excluded
|
Removed |
live
|
Removed |
message
|
Removed |
verbose
|
Removed |
framework
to support form made in given CSS framework. v1.0.0 also supports native form without using any CSS framework.Also, the
framework
is removed and supporting CSS frameworks are served via the following plugins:
| Old framework option | Plugin |
|---|---|
framework: 'bootstrap'
|
Bootstrap3 plugin |
framework: 'bootstrap4'
|
Bootstrap plugin |
framework: 'foundation'
|
Foundation plugin |
framework: 'foundation5'
|
Zurb Foundation 5 isn't supported anymore |
framework: 'pure'
|
Pure plugin |
framework: 'semantic'
|
Semantic plugin |
framework: 'uikit'
|
Uikit plugin |
data-fv-notempty="true"
for example, to associated validator rules.In v1.0.0, you have to enable the
Declarative plugin
.
message
option and all the error messages are taken from the English translation package by default. From this version, the core library (
FormValidation(.min).js
) doesn't consistof any language package, including English package. You have to load them manually. See the
Localization
page for more details.
| Old add-on | Plugin |
|---|---|
| i18n | L10n plugin |
| mandatoryIcon | MandatoryIcon plugin |
| reCaptcha1 | It isn't supported anymore |
| reCaptcha2 | Recaptcha plugin |
| Old API | New API |
|---|---|
addField()
|
addField() method |
enableFieldValidators()
|
disableValidator() method |
| enableValidator() method | |
getFieldElements()
|
getElements() method |
getOptions()
|
getFields() method |
removeField()
|
removeField() method |
resetField()
|
resetField() method |
resetForm()
|
resetForm() method |
revalidateField()
|
revalidateField() method |
updateOption()
|
updateValidatorOption() method |
updateStatus()
|
updateElementStatus() method |
| updateFieldStatus() method | |
validate()
|
validate() method |
validateField()
|
validateField() method |
defaultSubmit()
|
Removed |
disableSubmitButtons()
|
Removed |
getDynamicOption()
|
Removed |
getInvalidFields()
|
Removed |
getMessages()
|
Removed |
getSubmitButton()
|
Removed |
isValid()
|
Removed |
isValidContainer()
|
Removed |
isValidField()
|
Removed |
updateMessage()
|
Removed |
validateContainer()
|
Removed |
core.[form/field/validator].[event]
.The plugin event is named as
plugins.[pluginName].[event]
.
| Old event | New event |
|---|---|
added.field.fv
|
core.field.added event |
err.field.fv
|
core.field.invalid event |
err.validator.fv
|
core.validator.validated event |
success.validator.fv
|
core.validator.validated event |
removed.field.fv
|
core.field.removed event |
status.field.fv
|
core.field.invalid event |
| core.field.valid event | |
| core.field.validating event | |
success.field.fv
|
core.field.valid event |
success.form.fv
|
core.form.valid event |
init.field.fv
|
Removed |
init.form.fv
|
Removed |
prevalidate.form.fv
|
Removed |
<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/formvalidation/dist/css/formValidation.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
signinForm
"
method
=
"
POST
"
>
<
div
class
=
"
form-group row
"
>
<
label
class
=
"
col-md-3 col-form-label
"
>
Username
label
>
<
div
class
=
"
col-md-5
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
name
=
"
username
"
/>
div
>
div
>
<
div
class
=
"
form-group row
"
>
<
label
class
=
"
col-md-3 col-form-label
"
>
Password
label
>
<
div
class
=
"
col-md-5
"
>
<
input
type
=
"
password
"
class
=
"
form-control
"
name
=
"
password
"
/>
div
>
div
>
<
div
class
=
"
form-group row
"
>
<
div
class
=
"
col-md-9 offset-md-3
"
>
<
button
type
=
"
submit
"
class
=
"
btn btn-primary
"
>
Sign in
button
>
div
>
div
>
form
>
<
script
src
=
"
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/FormValidation.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/framework/bootstrap4.min.js
"
>
script
>
<
script
>
$
(
document
)
.
ready
(
function
(
)
{
$
(
'#signinForm'
)
.
formValidation
(
// I am validating Bootstrap 4 form
framework
:
'bootstrap4'
,
// Feedback icons
icon
:
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
,
}
,
// List of fields and their validation rules
fields
:
{
username
:
{
validators
:
{
notEmpty
:
{
message
:
'The username is required'
}
,
stringLength
:
{
min
:
6
,
max
:
30
,
message
:
'The username must be more than 6 and less than 30 characters long'
,
}
,
regexp
:
{
regexp
:
/
^[a-zA-Z0-9_]+$
/
,
message
:
'The username can only consist of alphabetical, number and underscore'
,
}
,
}
}
,
password
:
{
validators
:
{
notEmpty
:
{
message
:
'The password is required'
}
,
stringLength
:
{
min
:
8
,
message
:
'The password must have at least 8 characters'
,
}
,
}
}
,
}
,
)
;
}
)
;
script
>
body
>
html
>
<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/formvalidation/dist/css/formValidation.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
loginForm
"
method
=
"
POST
"
>
form
>
<
script
src
=
"
https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/FormValidation.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/plugins/Bootstrap.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'loginForm'
)
,
{
fields
:
{
// Same as above
}
,
plugins
:
{
// Trigger validation when the field value is changed
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
)
,
// Support Bootstrap form
bootstrap
:
new
FormValidation
.
plugins
.
Bootstrap
(
)
,
// Automatically validate the form when pressing its Submit button
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
)
,
// Submit the form if all fields are valid after validating
defaultSubmit
:
new
FormValidation
.
plugins
.
DefaultSubmit
(
)
,
// Display various icons based on the field validity
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
,
}
)
,
}
,
}
)
;
}
)
;
script
>
body
>
html
>
framework
option in previous version:
| Old framework option (v0.8.1) | Plugin (v1.0.0) |
|---|---|
framework: 'bootstrap'
|
Bootstrap3 plugin |
framework: 'bootstrap4'
|
Bootstrap plugin |
framework: 'foundation'
|
Foundation plugin |
framework: 'foundation5'
|
Zurb Foundation 5 isn't supported anymore |
framework: 'pure'
|
Pure plugin |
framework: 'semantic'
|
Semantic plugin |
framework: 'uikit'
|
Uikit plugin |
framework: 'bootstrap4'
validator
along to the
status.field.fv
event
formnovalidate
attribute causes IE to send two postbacks to server
live
mode disabled (
live: 'disabled'
) and form has some radios/checkboxes
destroy()
if a field is replaced manually
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/bootstrap/css/bootstrap.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/formvalidation/dist/css/formValidation.min.css
"
/>
<
script
src
=
"
/vendor/jquery/jquery.min.js
"
>
script
>
<
script
src
=
"
/vendor/tether/js/tether.min.js
"
>
script
>
<
script
src
=
"
/vendor/bootstrap/js/bootstrap.min.js
"
>
script
>
<
script
src
=
"
/vendor/formvalidation/dist/js/formValidation.min.js
"
>
script
>
<
script
src
=
"
/vendor/formvalidation/dist/js/framework/bootstrap4.min.js
"
>
script
>
bootstrap(.min).js
file provided by the Bootstrap framework with
bootstrap4(.min).js
provided by FormValidation which is placed inside the
formvalidation/dist/js/framework
directory.
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/foundation/css/normalize.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/foundation/css/foundation.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/formvalidation/dist/css/formValidation.min.css
"
/>
<
script
src
=
"
/vendor/jquery/jquery.min.js
"
>
script
>
<
script
src
=
"
/vendor/foundation/js/vendor/modernizr.js
"
>
script
>
<
script
src
=
"
/vendor/foundation/js/foundation/foundation.js
"
>
script
>
<
script
src
=
"
/vendor/foundation/js/foundation/foundation.tooltip.js
"
>
script
>
<
script
src
=
"
/vendor/formvalidation/dist/js/formValidation.min.js
"
>
script
>
<
script
src
=
"
/vendor/formvalidation/dist/js/framework/foundation5.min.js
"
>
script
>
foundation(.min).js
file provided by the Foundation framework with
foundation5(.min).js
provided by FormValidation which is placed inside the
formvalidation/dist/js/framework
directory.
framework
option as following:
// If your form uses Bootstrap 4 alpha
$
(
yourForm
)
.
formValidation
(
{
framework
:
'bootstrap4'
,
...
}
)
;
// If your form uses Foundation 5
$
(
yourForm
)
.
formValidation
(
{
framework
:
'foundation5'
,
...
}
)
;
priority
option that allows to set the validator execution order
rst.field.fv
and
rst.form.fv
events that are triggered after calling
resetField()
and
resetForm()
methods, respectively
flags
option to use in declarative mode
async
option
fields
option provided by the
different validator
can be separated by a comma with or without a space
min
,
max
options follows the same format as
format
updateMessage()
method doesn't work properly if the
selector
contains multiple class names
$
(
form
)
.
formValidation
(
{
framework
:
'...'
,
fields
:
{
username
:
{
validators
:
{
required
:
{
alias
:
'notEmpty'
,
message
:
'The username is required'
,
}
,
}
,
}
,
}
,
}
)
;
$
(
form
)
.
formValidation
(
{
framework
:
'...'
,
fields
:
{
password
:
{
validators
:
{
checkUppercase
:
{
alias
:
'callback'
,
message
:
'The password must have at least one uppercase character'
,
callback
:
function
(
value
,
validator
,
$field
)
{
...
}
}
,
checkLowercase
:
{
alias
:
'callback'
,
message
:
'The password must have at least one lowercase character'
,
callback
:
function
(
value
,
validator
,
$field
)
{
...
}
}
,
checkDigits
:
{
alias
:
'callback'
,
message
:
'The password must have at least one digit'
,
callback
:
function
(
value
,
validator
,
$field
)
{
...
}
}
,
checkSpecial
:
{
alias
:
'callback'
,
message
:
'The password must have at least one special character'
,
callback
:
function
(
value
,
validator
,
$field
)
{
...
}
}
}
}
}
}
)
;
| Old | New |
|---|---|
be_FR
|
fr_BE
|
be_NL
|
nl_BE
|
gr_EL
|
el_GR
|
%s
are replaced with the
min
,
max
,
value
options when the input isn't a number
type
to the return value. The type can be
DNI
,
NIE
or
CIF
.
isValidContainer()
method doesn't ignore field which validators are totally disabled
enabled
option doesn't work in declarative mode
message
option for form isn't used. The plugin uses default message provided by each validator instead
prevalidate.form.fv
event that is triggered before validating the form
$field
and
value
in data/url callbacks
STATUS_IGNORED
status. The field will be ignored for the current validation if the validator returns
null
false
if the country is not supported
excluded
option
formnovalidate
attribute
updateMessage()
method must return the plugin instance for chaining
resetField(true)
and
resetForm(true)
methods, the field need be reset value before updating the status
dataType
,
crossDomain
,
validKey
options for
remote validator
.
declarative
option to support big form
isValid()
method which should return
null
when there is not validated or being validated field.
isValid()
combined do not work
err.form.fv
validating
icon when the field is being validated
resetForm()
method
transformer
option doesn't work with
notEmpty validator
isValidContainer()
and
validateContainer()
methods to support fields with the same name
transformer
option, allowing to hook the value of field before validating
setLocale()
and
getLocale()
methods to support multiple languages
validateContainer()
method
composer.json
file
err
,
icon
,
row
options
error.x.x
to
err.x.x
to avoid
window.onerror
being invoked by jQuery
allowEmptyProtocol
option to set optional protocol in
uri validator
jQuery
instead of
window.jQuery
Date
object as value for
min and max
options
isValidContainer()
method should return
null
if the container consists of at least one field which is not validated yet or being validated
2014-11-1 23:
as valid
YYYY-MM-DD h:m
date
html5Attributes
mapping
validateContainer()
to use map value instead of key
validating
icon when the field is being validated
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/bootstrap/css/bootstrap.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/bootstrapvalidator/dist/css/bootstrapValidator(.min).css
"
/>
<
script
src
=
"
/vendor/jquery/jquery.min.js
"
>
script
>
<
script
src
=
"
/vendor/bootstrap/js/bootstrap.min.js
"
>
script
>
<
script
src
=
"
/vendor/bootstrapvalidator/dist/js/bootstrapValidator(.min).js
"
>
script
>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/bootstrap/css/bootstrap.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendor/formvalidation/dist/css/formValidation(.min).css
"
/>
<
script
src
=
"
/vendor/jquery/jquery.min.js
"
>
script
>
<
script
src
=
"
/vendor/bootstrap/js/bootstrap.min.js
"
>
script
>
<
script
src
=
"
/vendor/formvalidation/dist/js/formValidation(.min).js
"
>
script
>
<
script
src
=
"
/vendor/formvalidation/dist/js/framework/bootstrap(.min).js
"
>
script
>
bootstrap(.min).js
file provided by the Bootstrap framework with
bootstrap(.min).js
provided by FormValidation which is placed inside the
formvalidation/dist/js/framework
directory.They are two different files and both of them need to be included as mentioned above
// v0.5.3
(
function
(
$
)
{
$
.
fn
.
bootstrapValidator
.
validators
.
yourValidatorName
=
{
validate
:
function
(
validator
,
$field
,
options
)
{
...
}
}
;
}
(
window
.
jQuery
)
)
;
// v0.6.0
(
function
(
$
)
{
FormValidation
.
Validator
.
yourValidatorName
=
{
validate
:
function
(
validator
,
$field
,
options
)
{
// ...
// The validation code is the same
}
}
;
}
(
window
.
jQuery
)
)
;
| v0.5.3 | v0.6.0 |
|---|---|
Use
data-bv-xxx
attribute
|
Use
data-fv-xxx
attribute
|
| v0.5.3 | v0.6.0 |
|---|---|
container
|
err.container
|
feedbackIcons
|
icon
|
group
|
row.selector
|
submitButtons
|
button.selector
|
// v0.5.3
$
(
form
)
.
bootstrapValidator
(
{
container
:
'tooltip'
,
feedbackIcons
:
{
valid
:
'...'
,
invalid
:
'...'
,
validating
:
'...'
}
,
group
:
'td'
,
submitButtons
:
'#submitButton'
}
)
;
// v0.6.0
$
(
form
)
.
formValidation
(
{
framework
:
'bootstrap'
,
err
:
{
container
:
'tooltip'
}
icon
:
{
valid
:
'...'
,
invalid
:
'...'
,
validating
:
'...'
}
,
row
:
{
selector
:
'td'
}
,
button
:
{
selector
:
'#submitButton'
}
}
)
;
| v0.5.3 | v0.6.0 |
|---|---|
container
|
err
|
feedbackIcons
|
icon
|
group
|
row
|
// v0.5.3
$
(
form
)
.
bootstrapValidator
(
{
fields
:
{
fieldName
:
{
container
:
'tooltip'
,
feedbackIcons
:
false
,
group
:
'.col-sm-3'
,
validators
:
{
...
}
}
}
}
)
;
// v0.6.0
$
(
form
)
.
formValidation
(
{
framework
:
'bootstrap'
,
fields
:
{
fieldName
:
{
err
:
'tooltip'
,
icon
:
false
,
row
:
'.col-sm-3'
,
validators
:
{
...
}
}
}
}
)
;
.bv
is changed to
.fv
error.
is changed to
err.
to avoid window.onerror being invoked by jQuery
| v0.5.3 | v0.6.0 |
|---|---|
init.form.bv
|
init.form.fv
|
error.form.bv
|
err.form.fv
|
success.form.bv
|
success.form.fv
|
added.field.bv
|
added.field.fv
|
removed.field.bv
|
removed.field.fv
|
init.field.bv
|
init.field.fv
|
error.field.bv
|
err.field.fv
|
success.field.bv
|
success.field.fv
|
status.field.bv
|
status.field.fv
|
error.validator.bv
|
err.validator.fv
|
success.validator.bv
|
success.validator.fv
|
min
,
max
options for the
date validator
trim
option for the
stringLength validator
validator
minFiles
,
maxFiles
,
minTotalSize
,
maxTotalSize
options for the
file validator
autoFocus
option
type='color'
attribute
data
options via HTML attributes
data-bv-validatorname="data-bv-validatorname"
trigger: 'blur'
,
container: 'tooltip'
isValidField()
and
validateField()
methods for fields without validators
error.field.bv
event isn't triggered if verbose is set to
false
verbose
option for field doesn't override the form level
verbose
option
init
and
destroy
methods to validator
delay
option to the
remote validator
container
option can be defined by a callback
input-group
minlength
attribute
minSize
option for the
file validator
email
is not valid email address
fields
option
onclick="return false;"
type="number"
type
option when using
remote validator
:
$
(
form
)
.
bootstrapValidator
(
{
fields
:
{
username
:
{
message
:
'The username is not valid'
,
validators
:
{
// The validator will create an Ajax request
// sending { username: 'its value' } to the back-end
remote
:
{
message
:
'The username is not available'
,
url
:
'/path/to/backend/'
,
type
:
'GET'
,
// or 'POST'
}
,
}
,
}
,
}
,
}
)
;
headers
option to the
remote validator
demo/remote.php
demo/remote.html
and
demo/message.html
demo/date.html
and
demo/tab.html
examples
YYYY-MM-DD
when using
submitButtons
option doesn't work correctly
addField()
and
removeField()
methods for managing dynamic fields
container
option for indicating the element showing all errors
enabled
option enable/disable particular validator
excluded
option to exclude particular field
feedbackIcons
option to enabled/disable feedback icons for particular fields
group
option
destroy()
method
getInvalidFields()
method that returns all invalid fields
isValidContainer()
method
isValidField()
method
revalidateField()
method
resetField()
method
updateMessage()
method
updateOption()
method for updating the particular validator option
$field
instance to the
callback validator
separator
option for the
date validator
$.fn.bootstrapValidator.helpers
renames
mod_11_10
to
mod11And10
,
mod_37_36
to
mod37And36
submitHandler
option
.input-group
element
data-bv-callback-callback
attribute
input-group
updateStatus()
method. The plugin now doesn't show the errors, feedback icons of given field if there are uncompleted validators
url
and method type (GET/POST)
has-error
class
inclusive
option in the
between
,
greaterThan
and
lessThan
validators
_isExcluded()
when initializing the form
false
if the country code is not supported
threshold
option doesn't work on IE 8
submitHandler
option. In v0.5.0, use the
success.form.bv
event instead.
$
(
form
)
.
bootstrapValidator
(
{
submitHandler
:
function
(
form
,
validator
,
submitButton
)
{
...
}
}
)
;
$
(
form
)
.
bootstrapValidator
(
{
// Removing submitHandler option
}
)
.
on
(
'success.form.bv'
,
function
(
e
)
{
// Prevent form submission
e
.
preventDefault
(
)
;
var
$form
=
$
(
e
.
target
)
,
validator
=
$form
.
data
(
'bootstrapValidator'
)
,
submitButton
=
validator
.
getSubmitButton
(
)
;
// Do whatever you want here ...
}
)
;
$.fn.bootstrapValidator.helpers.date
method for validating a date, re-used in
date
,
id
,
vat
validators
separator
option to the
numeric validator
threshold
option
submitButtons
to
[type="submit"]
to support
input type="submit"
$.fn.bootstrapValidator.helpers.mod_11_10
method that implements modulus 11, 10 (ISO 7064) algorithm. The helper is then reused in validating
German and Croatian VAT numbers
$.fn.bootstrapValidator.helpers.mod_37_36
method that implements modulus 37, 36 (ISO 7064) algorithm, used in
GRid validator
name
attribute and
selector
option for field
select
element
excluded: ':disabled'
setting does not work on IE 8
excluded
option
+1
country code and area code for US phone number
enabled
is set to
false
selector
option
validate()
method from submit the form automatically. So we can call the
validate()
method to validate the form
setLiveMode()
method to turn on/off the live validating mode
data-bv-trigger
attribute or the
trigger
option
| HTML 5 attribute | Equivalent validator |
|---|---|
min="..."
|
greaterThan validator |
max="..."
|
lessThan validator |
maxlength="..."
|
stringLength validator |
pattern="..."
|
regexp validator |
required
|
notEmpty validator |
type="color"
|
color validator |
type="email"
|
emailAddress validator |
type="range"
|
between validator |
type="url"
|
uri validator |
disableSubmitButtons()
method is now marked as a public API
updateStatus()
method now accepts the field name only
type="hidden"
) and invisible elements
fields.[fieldName].message
option is not used when showing the error message
form.submit()
inside
submitHandler
container
option for each field to indicate where the error messages are shown
selector
option for each field. The field can be defined by CSS validator instead of the name attribute
enabled
option and
enableFieldValidators()
method to enable/disable all validators to given field
bower.json
file
columns
option. Now the plugin works normally no matter how many columns the form uses
updateStatus()
method to make the plugin play well with another
resetForm
method now only resets fields with validator rules
submitHandler
or default submission isn't called after remote validation completes
resetForm()
method
Deferred
submitHandler()
parameter
true
submitHandler
option
live
option
col-xs-
), small (
col-sm-
), medium (
col-md-
) elements
submitButtons
option