form
.form-group
label(for="username") Username
input.form-control(
name="username",
id="username",
pattern="^\\w{6,8}$",
)
.form-group
label(for="password") Password
input.form-control(
required,
name="password",
type="password",
placeholder="Password",
)
.form-group
label(for="age") Age
input.form-control(
required,
name="age",
placeholder="Age",
pattern="^\\d+$",
)
p.alert.alert-danger.error-hint.mt-1 Must be a number
.form-group
button.btn.btn-primary.btn-block Submit
View Compiled
body
background-color gray
form
margin 2em auto 0
padding 2em
width 20rem
background-color white
border-radius .5em
input:invalid:not(:placeholder-shown)
background-color lighten(red, 90%)
border-color var(--red)
+ .error-hint
display block
.error-hint
display none
View Compiled