<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
">
<
title
>jQuery form validation Poppa plugin</
title
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"validation.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"global.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"github.css"
>
<
style
>
h2 {
padding-left: 300px;
}
</
style
>
</
head
>
<
body
>
<
h2
style
=
"color:green"
>
GeeksforGeeks
</
h2
>
<
b
style
=
"padding-left:300px"
>
jQuery form validation Poppa plugin
</
b
>
<
p
></
p
>
<
div
class
=
"container"
>
<
div
class
=
"row"
>
<
div
class
=
"col-9"
>
<
div
class
=
"example-block mb-4"
>
<
form
action
=
""
class
=
"live-validation mb-3"
id
=
"live-validation"
>
<
div
class
=
"form-group"
>
<
label
>Login ID</
label
>
<
input
name
=
"login"
type
=
"text"
data-validation-regexp
=
"^[A-Z]+$"
class
=
"form-control"
required>
</
div
>
<
div
class
=
"form-group"
>
<
label
>Salary</
label
>
<
input
name
=
"login"
type
=
"number"
min
=
"10000"
max
=
"30000"
class
=
"form-control"
required>
</
div
>
<
div
class
=
"form-group"
>
<
label
>Email ID</
label
>
<
input
name
=
"email"
type
=
"email"
class
=
"form-control"
required>
</
div
>
<
div
class
=
"form-group"
>
<
label
>Password</
label
>
<
input
name
=
"password"
data-validation-type
=
"alphanumeric"
type
=
"password"
class
=
"form-control"
required>
</
div
>
<
div
class
=
"form-group"
>
<
label
>Website</
label
>
<
input
name
=
"website"
data-validation-type
=
"url"
class
=
"form-control"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
>Describe yourself</
label
>
<
textarea
name
=
"bio"
data-validation-length
=
"min:10,max:150"
data-validation-hint
=
"Write your biodata"
data-validation-hint
=
"Describe about yourself"
class
=
"form-control"
>
</
textarea
>
</
div
>
<
div
class
=
"form-group"
>
<
label
class
=
"mb-0"
>
I agree to the terms of service
</
label
>
<
input
type
=
"checkbox"
data-validation-rqmessage
=
"Please agree to terms of service"
required>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-primary"
>
Submit Form
</
button
>
</
form
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
</
script
>
<
script
src
=
"global.js"
></
script
>
<
script
src
=
"poppa.js"
></
script
>
<
script
src
=
"highlight.js"
></
script
>
<
script
>
$(document).ready(function () {
/* Initiate highlighting */
hljs.initHighlightingOnLoad();
/* Initiate live validation on each form */
$('.live-validation').validation({
'autocomplete': 'on',
'liveValidation': true
});
});
</
script
>
</
body
>
</
html
>