<
form
id
=
"
demoForm
"
method
=
"
post
"
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
ISBN type
div
>
<
div
class
=
"
fl w-50
"
>
<
select
name
=
"
isbnType
"
class
=
"
input-reset
"
>
<
option
value
=
"
isbn10
"
>
ISBN 10
option
>
<
option
value
=
"
isbn13
"
>
ISBN 13
option
>
select
>
div
>
div
>
div
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
ISBN
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
isbn
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
form
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
const
ISBN10_REGEXP
=
"^[0-9]{9}[0-9X]$"
;
const
ISBN13_REGEXP
=
"^(978|979)[0-9]{9}[0-9X]$"
;
const
demoForm
=
document
.
getElementById
(
'demoForm'
)
;
// Create a FormValidation instance which will be used later
const
fv
=
FormValidation
.
formValidation
(
demoForm
,
{
fields
:
{
isbnType
:
{
validators
:
{
notEmpty
:
{
message
:
'The ISBN type is required'
}
}
}
,
isbn
:
{
validators
:
{
notEmpty
:
{
message
:
'The ISBN is required'
}
,
regexp
:
{
regexp
:
ISBN10_REGEXP
,
message
:
'The input is not a valid ISBN'
,
}
}
,
}
,
}
,
plugins
:
{
...
}
,
}
)
;
}
)
;
isbn
field uses the
ISBN10_REGEXP
for the regexp validator. How can we turn it to
ISBN13_REGEXP
when user picks up the ISBN 13 format?This guide demonstrates a few ways of supporting dynamic regular expression.
| Sample | Description |
|---|---|
| A valid ISBN 10 | |
| 99921-58-10-6 | An invalid ISBN 10 |
| A valid ISBN 13 | |
| 978-0-306-40615-6 | An invalid ISBN 13 |
demoForm
.
querySelector
(
'[name="isbnType"]'
)
.
addEventListener
(
'change'
,
function
(
e
)
{
const
isbnType
=
e
.
target
.
value
;
if
(
isbnType
===
''
)
{
return
;
}
let
regexp
,
message
;
switch
(
isbnType
)
{
case
'isbn13'
:
regexp
=
ISBN13_REGEXP
;
message
=
'The input is not a valid ISBN 13'
;
break
;
case
'isbn10'
:
default
:
regexp
=
ISBN10_REGEXP
;
message
=
'The input is not a valid ISBN 10'
;
break
;
}
// fv is the FormValidation instance created above
fv
// Update options
.
updateValidatorOption
(
'isbn'
,
'regexp'
,
'regexp'
,
regexp
)
// Update message
.
updateValidatorOption
(
'isbn'
,
'regexp'
,
'message'
,
message
)
// You might need to revalidate field
.
revalidateField
(
'isbn'
)
;
}
)
;
callback
:
function
(
input
)
{
// Get the input value
const
value
=
input
.
value
;
// Ignore if the input is empty
if
(
value
===
''
)
{
return
{
valid
:
true
,
}
;
}
// Get the selected ISBN type
const
isbnType
=
demoForm
.
querySelector
(
'[name="isbnType"]'
)
.
value
;
const
pattern
=
isbnType
===
'isbn10'
?
ISBN10_REGEXP
:
ISBN13_REGEXP
;
const
mesage
=
isbnType
===
'isbn10'
?
'The input is not a valid ISBN 10'
:
'The input is not a valid ISBN 13'
;
// Use the regexp validator
const
result
=
FormValidation
.
validators
.
regexp
(
)
.
validate
(
{
value
:
value
,
options
:
{
regexp
:
pattern
,
message
:
message
,
}
,
}
)
;
return
{
valid
:
result
.
valid
,
message
:
message
,
}
;
}
demoForm
.
querySelector
(
'[name="isbnType"]'
)
.
addEventListener
(
'change'
,
function
(
e
)
{
fv
.
revalidateField
(
'isbn'
)
;
}
)
;