value
property. In some case, you might want to adjust the value before performing validations. For example, the
numeric validator
doesn't allow to use a comma (,) for thousand separator.
<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/formvalidation/dist/css/formValidation.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
demoForm
"
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/Transformer.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
transformer
:
new
FormValidation
.
plugins
.
Transformer
(
{
// Replace FIELD_NAME and VALIDATOR_NAME with the real names
FIELD_NAME
:
{
VALIDATOR_NAME
:
function
(
field
,
element
,
validator
)
{
// field is the field name
// element is the field element
// validator is the name of validator
// Get the field value
let
value
=
element
.
value
;
// Modify the field value
// ...
// Returns a string which will be used as field value to be validated
return
value
;
}
}
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
transformer
:
new
FormValidation
.
plugins
.
Transformer
(
{
website
:
{
// I want to modify the website field before executing uri validator
uri
:
function
(
field
,
element
,
validator
)
{
// Get the field value
let
value
=
element
.
value
;
// Check if it does not start with http:// or https://
if
(
value
&&
value
.
substr
(
0
,
7
)
!==
'http://'
&&
value
.
substr
(
0
,
8
)
!==
'https://'
)
{
// then prefix with http://
value
=
'http://'
+
value
;
}
// Return new value
return
value
;
}
,
}
,
}
)
,
transformer
:
new
FormValidation
.
plugins
.
Transformer
(
{
price
:
{
numeric
:
(
field
,
element
,
validator
)
=>
{
// Get the field value
const
value
=
element
.
value
;
// Replace all commas by empty space
return
value
.
replace
(
','
,
''
)
;
}
,
}
,
}
)
,
XXX XXX XXXX
(where X presents a digit from 0-9) is treated as invalid US phone number. By using the Transformer plugin, we can turn this kind of number into a valid one by removing all spaces.
transformer
:
new
FormValidation
.
plugins
.
Transformer
(
{
phoneNumber
:
{
phone
:
function
(
field
,
element
,
validator
)
{
// Get the field value
const
value
=
element
.
value
;
// Check if the value has format of XXX XXX XXXX
if
(
/
^(\d){3}(\s+)(\d){3}(\s+)(\d){4}$
/
.
test
(
value
)
)
{
// Remove all spaces
return
value
.
replace
(
/
\s
/
g
,
''
)
;
}
else
{
// Otherwise, return the original value
return
value
;
}
}
,
}
,
}
)
,
transformer
:
new
FormValidation
.
plugins
.
Transformer
(
{
comment
:
{
stringLength
:
function
(
field
,
element
,
validator
)
{
// Get the plain text without HTML
return
tinyMCE
.
activeEditor
.
getContent
(
{
format
:
'text'
}
)
;
}
,
}
,
}
)
,