<
form
id
=
"
loginForm
"
method
=
"
POST
"
>
<
div
class
=
"
form-group row
"
>
<
label
class
=
"
col-sm-3 col-form-label
"
>
Username
label
>
<
div
class
=
"
col-sm-4
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
name
=
"
username
"
/>
div
>
div
>
<
div
class
=
"
form-group row
"
>
<
label
class
=
"
col-sm-3 col-form-label
"
>
Password
label
>
<
div
class
=
"
col-sm-4
"
>
<
input
type
=
"
password
"
class
=
"
form-control
"
name
=
"
password
"
/>
div
>
div
>
<
div
class
=
"
form-group row
"
>
<
div
class
=
"
col-sm-9 offset-sm-3
"
>
<
button
type
=
"
submit
"
class
=
"
btn btn-primary
"
>
Login
button
>
div
>
div
>
form
>
// LoginForm.js
var
LoginForm
=
{
state
:
{
username
:
''
,
password
:
''
,
}
,
view
:
function
(
)
{
return
m
(
'form'
,
{
id
:
'loginForm'
,
method
:
'POST'
}
,
m
(
'div'
,
{
class
:
'form-group row'
}
,
m
(
'label'
,
{
class
:
'col-sm-3 col-form-label'
}
,
'Username'
)
,
m
(
'div'
,
{
class
:
'col-sm-4'
}
,
m
(
'input'
,
{
class
:
'form-control'
,
type
:
'text'
,
name
:
'username'
,
oninput
:
(
e
)
=>
(
this
.
state
.
username
=
e
.
target
.
value
)
,
value
:
this
.
state
.
username
,
}
)
)
)
,
m
(
'div'
,
{
class
:
'form-group row'
}
,
m
(
'label'
,
{
class
:
'col-sm-3 col-form-label'
}
,
'Password'
)
,
m
(
'div'
,
{
class
:
'col-sm-4'
}
,
m
(
'input'
,
{
class
:
'form-control'
,
type
:
'password'
,
name
:
'password'
,
oninput
:
(
e
)
=>
(
this
.
state
.
password
=
e
.
target
.
value
)
,
value
:
this
.
state
.
password
,
}
)
)
)
,
m
(
'div'
,
{
class
:
'form-group row'
}
,
m
(
'div'
,
{
class
:
'col-sm-9 offset-sm-3'
}
,
m
(
'button'
,
{
class
:
'btn btn-primary'
,
type
:
'submit'
}
,
'Login'
)
)
)
)
;
}
,
}
;
// LoginForm.js
var
LoginForm
=
{
oncreate
:
function
(
vnode
)
{
// Create a FormValidation instance
this
.
fv
=
FormValidation
.
formValidation
(
document
.
getElementById
(
'loginForm'
)
,
{
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'
,
}
,
}
,
}
,
}
,
plugins
:
{
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
)
,
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
)
,
bootstrap
:
new
FormValidation
.
plugins
.
Bootstrap
(
)
,
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
,
}
)
,
}
,
}
)
;
}
,
}
;
var
LoginForm
=
{
onremove
(
)
{
if
(
this
.
fv
)
{
this
.
fv
.
destroy
(
)
;
}
}
,
}
;