Download
Please choose the right package to purchase
Give it a try
Below is basic working examples of FormValidation using with Bootstrap, Foundation, Pure, Semantic UI and UIKit frameworks.
FormValidation is designed to work with almost frameworks. This section demonstrates the ability of using it with other frameworks (Skeleton, Spectre, etc.) and form builders (JotForm, etc.)
The latest stable version of FormValidation supports Bootstrap 3 (v3.3.7), Bootstrap 4 (v4.0.0-alpha.3), Foundation 5 (v5.5.3), Foundation 6 (v6.2.3), Pure (v0.6.0), Semantic UI (v2.2.2), and UIKit (v2.26.4)
<form id="basicBootstrapForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-6">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" id="captchaOperation"></label>
<div class="col-xs-4">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6 col-xs-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicBootstrapForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
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, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script><form id="basicBootstrap4Form">
<div class="form-group row">
<label class="col-xs-3 col-form-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label">Username</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label">Email address</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label">Password</label>
<div class="col-xs-6">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3">Gender</label>
<div class="col-xs-6">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label" id="captchaOperation"></label>
<div class="col-xs-4">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group row">
<div class="col-xs-9 offset-xs-3">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-9 offset-xs-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicBootstrap4Form').formValidation({
framework: 'bootstrap4',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
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, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script><form id="basicFoundation5Form" class="fv-form-horizontal">
<div class="row">
<div class="small-3 columns">
<label class="right inline">Full name</label>
</div>
<div class="small-9 columns">
<div class="row">
<div class="small-6 columns">
<input type="text" name="firstName" placeholder="First name" />
</div>
<div class="small-6 columns">
<input type="text" name="lastName" placeholder="Last name" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Username</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="username" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Email address</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="email" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Password</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="password" name="password" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right">Gender</label>
</div>
<div class="small-9 columns">
<input type="radio" id="maleRadio" name="gender" value="male" /><label for="maleRadio">Male</label>
<input type="radio" id="femaleRadio" name="gender" value="female" /><label for="femaleRadio">Female</label>
<input type="radio" id="otherRadio" name="gender" value="other" /><label for="otherRadio">Other</label>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline" id="captchaOperation"></label>
</div>
<div class="small-3 small-pull-6 columns">
<input type="text" name="captcha" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<input type="checkbox" id="agreeCheckbox" name="agree" value="agree" /> <label for="agreeCheckbox">Agree with the terms and conditions</label>
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button small" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicFoundation5Form').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
firstName: {
row: '.small-6',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.small-6',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
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, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script><form id="basicFoundationForm">
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Full name</label>
</div>
<div class="small-9 columns">
<div class="row">
<div class="small-6 columns">
<input type="text" name="firstName" placeholder="First name" />
</div>
<div class="small-6 columns">
<input type="text" name="lastName" placeholder="Last name" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Username</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="username" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Email address</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="email" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Password</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="password" name="password" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right">Gender</label>
</div>
<div class="small-9 columns">
<input type="radio" id="maleRadio" name="gender" value="male" /><label for="maleRadio">Male</label>
<input type="radio" id="femaleRadio" name="gender" value="female" /><label for="femaleRadio">Female</label>
<input type="radio" id="otherRadio" name="gender" value="other" /><label for="otherRadio">Other</label>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle" id="captchaOperation"></label>
</div>
<div class="small-3 small-pull-6 columns">
<input type="text" name="captcha" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<input type="checkbox" id="agreeCheckbox" name="agree" value="agree" /> <label for="agreeCheckbox">Agree with the terms and conditions</label>
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicFoundationForm').formValidation({
framework: 'foundation',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
firstName: {
row: '.small-6',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.small-6',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
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, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script><form id="basicPureForm" class="pure-form pure-form-aligned">
<div class="pure-control-group">
<label>Full name</label>
<input name="firstName" type="text" placeholder="First name" />
</div>
<div class="pure-control-group">
<label></label>
<input name="lastName" type="text" placeholder="Last name" />
</div>
<div class="pure-control-group">
<label>Username</label>
<input name="username" type="text" placeholder="Username" />
</div>
<div class="pure-control-group">
<label>Email address</label>
<input name="email" type="text" placeholder="Email address" />
</div>
<div class="pure-control-group">
<label>Password</label>
<input name="password" type="password" placeholder="Password" />
</div>
<div class="pure-control-group">
<label>Gender</label>
<input name="gender" type="radio" value="male" /> Male<br/>
<label></label>
<input name="gender" type="radio" value="female" /> Female<br/>
<label></label>
<input name="gender" type="radio" value="other" /> Other<br/>
</div>
<div class="pure-control-group">
<label id="captchaOperation"></label>
<input type="text" name="captcha" />
</div>
<div class="pure-control-group">
<label></label>
<input name="agree" type="checkbox" /> Agree with the terms and conditions
</div>
<div class="pure-control-group">
<label></label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicPureForm').formValidation({
framework: 'pure',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
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, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script><form id="basicSemanticForm" class="ui form">
<div class="fields">
<label class="four wide field">Full name</label>
<div class="six wide field">
<div class="ui input icon">
<input name="firstName" type="text" placeholder="First name" />
</div>
</div>
<div class="six wide field">
<div class="ui input icon">
<input name="lastName" type="text" placeholder="Last name" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">Username</label>
<div class="eight wide field">
<div class="ui input icon">
<input name="username" type="text" placeholder="Username" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">Email address</label>
<div class="eight wide field">
<div class="ui input icon">
<input name="email" type="text" placeholder="Email address" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">Password</label>
<div class="eight wide field">
<div class="ui input icon">
<input name="password" type="password" placeholder="Password" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">Gender</label>
<div class="ten wide field">
<div class="ui input icon">
<div class="ui radio checkbox">
<input name="gender" type="radio" value="male" /> <label>Male</label>
</div>
<div class="ui radio checkbox">
<input name="gender" type="radio" value="female" /> <label>Female</label>
</div>
<div class="ui radio checkbox">
<input name="gender" type="radio" value="other" /> <label>Other</label>
</div>
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">
<span class="right" id="captchaOperation"></span>
</label>
<div class="four wide field">
<div class="ui input icon">
<input type="text" name="captcha" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field"></label>
<div class="ten wide field">
<div class="ui input icon">
<div class="ui checkbox">
<input name="agree" type="checkbox" /> <label>Agree with the terms and conditions</label>
</div>
</div>
</div>
</div>
<div class="fields">
<label class="four wide field"></label>
<div class="eight wide field">
<button type="submit" class="ui primary button">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicSemanticForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
fields: {
firstName: {
row: '.six',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.six',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
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, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script><form id="basicUikitForm" class="uk-form uk-form-horizontal">
<div class="uk-form-row">
<label class="uk-form-label">Full name</label>
<div class="uk-form-controls">
<div class="uk-grid">
<div class="uk-width-1-2">
<input class="uk-width-1-1" name="firstName" type="text" placeholder="First name" />
</div>
<div class="uk-width-1-2">
<input class="uk-width-1-1" name="lastName" type="text" placeholder="Last name" />
</div>
</div>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Username</label>
<div class="uk-form-controls">
<input name="username" type="text" placeholder="Username" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Email address</label>
<div class="uk-form-controls">
<input name="email" type="text" placeholder="Email address" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Password</label>
<div class="uk-form-controls">
<input name="password" type="password" placeholder="Password" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Gender</label>
<div class="uk-form-controls">
<label><input name="gender" type="radio" value="male" /> Male</label> <br/>
<label><input name="gender" type="radio" value="female" /> Female</label> <br/>
<label><input name="gender" type="radio" value="other" /> Other</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label" id="captchaOperation"></label>
<div class="uk-form-controls">
<input type="text" name="captcha" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<label>
<input name="agree" type="checkbox" /> Agree with the terms and conditions
</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<button type="submit" class="uk-button uk-button-primary">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicUikitForm').formValidation({
framework: 'uikit',
icon: {
valid: 'uk-icon-check',
invalid: 'uk-icon-times',
validating: 'uk-icon-refresh'
},
fields: {
firstName: {
row: '.uk-width-1-2',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.uk-width-1-2',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
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, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script><form id="basicBootstrapForm" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name"
data-fv-row=".col-xs-4"
data-fv-notempty="true"
data-fv-notempty-message="The first name is required" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name"
data-fv-row=".col-xs-4"
data-fv-notempty="true"
data-fv-notempty-message="The last name is required" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="username"
data-fv-notempty="true"
data-fv-notempty-message="The username is required"
data-fv-stringlength="true"
data-fv-stringlength-min="6"
data-fv-stringlength-max="30"
data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-fv-regexp="true"
data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="email"
data-fv-notempty="true"
data-fv-notempty-message="The email address is required"
data-fv-emailaddress="true"
data-fv-emailaddress-message="The input is not a valid email address" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password"
data-fv-notempty="true"
data-fv-notempty-message="The password is required"
data-fv-different="true"
data-fv-different-field="username"
data-fv-different-message="The password cannot be the same as username" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-6">
<div class="radio">
<label>
<input type="radio" name="gender" value="male"
data-fv-notempty="true"
data-fv-notempty-message="The gender is required" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" id="captchaOperation"></label>
<div class="col-xs-4">
<input type="text" class="form-control" name="captcha"
data-fv-callback="true"
data-fv-callback-callback="checkCaptcha"
data-fv-callback-message="Wrong answer" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6 col-xs-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree"
data-fv-notempty="true"
data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicBootstrapForm').formValidation();
});
</script><form id="basicBootstrap4Form"
data-fv-framework="bootstrap4"
data-fv-icon-valid="fa fa-check"
data-fv-icon-invalid="fa fa-times"
data-fv-icon-validating="fa fa-refresh">
<div class="form-group row">
<label class="col-xs-3 col-form-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name"
data-fv-row=".col-xs-4"
data-fv-notempty="true"
data-fv-notempty-message="The first name is required" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name"
data-fv-row=".col-xs-4"
data-fv-notempty="true"
data-fv-notempty-message="The last name is required" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label">Username</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="username"
data-fv-notempty="true"
data-fv-notempty-message="The username is required"
data-fv-stringlength="true"
data-fv-stringlength-min="6"
data-fv-stringlength-max="30"
data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-fv-regexp="true"
data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label">Email address</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="email"
data-fv-notempty="true"
data-fv-notempty-message="The email address is required"
data-fv-emailaddress="true"
data-fv-emailaddress-message="The input is not a valid email address" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label">Password</label>
<div class="col-xs-6">
<input type="password" class="form-control" name="password"
data-fv-notempty="true"
data-fv-notempty-message="The password is required"
data-fv-different="true"
data-fv-different-field="username"
data-fv-different-message="The password cannot be the same as username" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3">Gender</label>
<div class="col-xs-6">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gender" value="male"
data-fv-notempty="true"
data-fv-notempty-message="The gender is required" /> Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label" id="captchaOperation"></label>
<div class="col-xs-4">
<input type="text" class="form-control" name="captcha"
data-fv-callback="true"
data-fv-callback-callback="checkCaptcha"
data-fv-callback-message="Wrong answer" />
</div>
</div>
<div class="form-group row">
<div class="col-xs-9 offset-xs-3">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="agree" value="agree"
data-fv-notempty="true"
data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-9 offset-xs-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicBootstrap4Form').formValidation();
});
</script><form id="basicFoundation5Form" class="fv-form-horizontal"
data-fv-framework="foundation5"
data-fv-icon-valid="fa fa-check"
data-fv-icon-invalid="fa fa-times"
data-fv-icon-validating="fa fa-refresh">
<div class="row">
<div class="small-3 columns">
<label class="right inline">Full name</label>
</div>
<div class="small-9 columns">
<div class="row">
<div class="small-6 columns">
<input type="text" name="firstName" placeholder="First name"
data-fv-row=".small-6"
data-fv-notempty="true"
data-fv-notempty-message="The first name is required"/>
</div>
<div class="small-6 columns">
<input type="text" name="lastName" placeholder="Last name"
data-fv-row=".small-6"
data-fv-notempty="true"
data-fv-notempty-message="The last name is required" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Username</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="username"
data-fv-notempty="true"
data-fv-notempty-message="The username is required"
data-fv-stringlength="true"
data-fv-stringlength-min="6"
data-fv-stringlength-max="30"
data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-fv-regexp="true"
data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Email address</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="email"
data-fv-notempty="true"
data-fv-notempty-message="The email address is required"
data-fv-emailaddress="true"
data-fv-emailaddress-message="The input is not a valid email address" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Password</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="password" name="password"
data-fv-notempty="true"
data-fv-notempty-message="The password is required"
data-fv-different="true"
data-fv-different-field="username"
data-fv-different-message="The password cannot be the same as username" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right">Gender</label>
</div>
<div class="small-9 columns">
<input type="radio" name="gender" value="male"
data-fv-notempty="true"
data-fv-notempty-message="The gender is required" /><label>Male</label>
<input type="radio" name="gender" value="female" /><label>Female</label>
<input type="radio" name="gender" value="other" /><label>Other</label>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline" id="captchaOperation"></label>
</div>
<div class="small-3 small-pull-6 columns">
<input type="text" name="captcha"
data-fv-callback="true"
data-fv-callback-callback="checkCaptcha"
data-fv-callback-message="Wrong answer" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<input type="checkbox" name="agree" value="agree"
data-fv-notempty="true"
data-fv-notempty-message="You must agree with the terms and conditions" /> <label>Agree with the terms and conditions</label>
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button small" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicFoundation5Form').formValidation();
});
</script><form id="basicFoundationForm"
data-fv-framework="foundation"
data-fv-icon-valid="fa fa-check"
data-fv-icon-invalid="fa fa-times"
data-fv-icon-validating="fa fa-refresh">
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Full name</label>
</div>
<div class="small-9 columns">
<div class="row">
<div class="small-6 columns">
<input type="text" name="firstName" placeholder="First name"
data-fv-row=".small-6"
data-fv-notempty="true"
data-fv-notempty-message="The first name is required"/>
</div>
<div class="small-6 columns">
<input type="text" name="lastName" placeholder="Last name"
data-fv-row=".small-6"
data-fv-notempty="true"
data-fv-notempty-message="The last name is required" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Username</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="username"
data-fv-notempty="true"
data-fv-notempty-message="The username is required"
data-fv-stringlength="true"
data-fv-stringlength-min="6"
data-fv-stringlength-max="30"
data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-fv-regexp="true"
data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Email address</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="email"
data-fv-notempty="true"
data-fv-notempty-message="The email address is required"
data-fv-emailaddress="true"
data-fv-emailaddress-message="The input is not a valid email address" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Password</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="password" name="password"
data-fv-notempty="true"
data-fv-notempty-message="The password is required"
data-fv-different="true"
data-fv-different-field="username"
data-fv-different-message="The password cannot be the same as username" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right">Gender</label>
</div>
<div class="small-9 columns">
<input type="radio" name="gender" value="male"
data-fv-notempty="true"
data-fv-notempty-message="The gender is required" /><label>Male</label>
<input type="radio" name="gender" value="female" /><label>Female</label>
<input type="radio" name="gender" value="other" /><label>Other</label>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle" id="captchaOperation"></label>
</div>
<div class="small-3 small-pull-6 columns">
<input type="text" name="captcha"
data-fv-callback="true"
data-fv-callback-callback="checkCaptcha"
data-fv-callback-message="Wrong answer" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<input type="checkbox" name="agree" value="agree"
data-fv-notempty="true"
data-fv-notempty-message="You must agree with the terms and conditions" /> <label>Agree with the terms and conditions</label>
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicFoundationForm').formValidation();
});
</script><form id="basicPureForm" class="pure-form pure-form-aligned"
data-fv-framework="pure"
data-fv-icon-valid="fa fa-check"
data-fv-icon-invalid="fa fa-times"
data-fv-icon-validating="fa fa-refresh">
<div class="pure-control-group">
<label>Full name</label>
<input name="firstName" type="text" placeholder="First name"
data-fv-notempty="true"
data-fv-notempty-message="The first name is required" />
</div>
<div class="pure-control-group">
<label></label>
<input name="lastName" type="text" placeholder="Last name"
data-fv-notempty="true"
data-fv-notempty-message="The last name is required" />
</div>
<div class="pure-control-group">
<label>Username</label>
<input name="username" type="text" placeholder="Username"
data-fv-notempty="true"
data-fv-notempty-message="The username is required"
data-fv-stringlength="true"
data-fv-stringlength-min="6"
data-fv-stringlength-max="30"
data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-fv-regexp="true"
data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
</div>
<div class="pure-control-group">
<label>Email address</label>
<input name="email" type="text" placeholder="Email address"
data-fv-notempty="true"
data-fv-notempty-message="The email address is required"
data-fv-emailaddress="true"
data-fv-emailaddress-message="The input is not a valid email address" />
</div>
<div class="pure-control-group">
<label>Password</label>
<input name="password" type="password" placeholder="Password"
data-fv-notempty="true"
data-fv-notempty-message="The password is required"
data-fv-different="true"
data-fv-different-field="username"
data-fv-different-message="The password cannot be the same as username" />
</div>
<div class="pure-control-group">
<label>Gender</label>
<input name="gender" type="radio" value="male"
data-fv-notempty="true"
data-fv-notempty-message="The gender is required" /> Male<br/>
<label></label>
<input name="gender" type="radio" value="female" /> Female<br/>
<label></label>
<input name="gender" type="radio" value="other" /> Other<br/>
</div>
<div class="pure-control-group">
<label id="captchaOperation"></label>
<input type="text" name="captcha"
data-fv-callback="true"
data-fv-callback-callback="checkCaptcha"
data-fv-callback-message="Wrong answer" />
</div>
<div class="pure-control-group">
<label></label>
<input name="agree" type="checkbox"
data-fv-notempty="true"
data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
</div>
<div class="pure-control-group">
<label></label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</form>
<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicPureForm').formValidation();
});
</script><form id="basicSemanticForm" class="ui grid form fv-form-horizontal"
data-fv-framework="semantic"
data-fv-icon-valid="checkmark icon"
data-fv-icon-invalid="remove icon"
data-fv-icon-validating="refresh icon">
<div class="fields">
<label class="four wide field">Full name</label>
<div class="six wide field">
<div class="ui input icon">
<input name="firstName" type="text" placeholder="First name"
data-fv-row=".six"
data-fv-notempty="true"
data-fv-notempty-message="The first name is required" />
</div>
</div>
<div class="six wide field">
<div class="ui input icon">
<input name="lastName" type="text" placeholder="Last name"
data-fv-row=".six"
data-fv-notempty="true"
data-fv-notempty-message="The last name is required" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">Username</label>
<div class="eight wide field">
<div class="ui input icon">
<input name="username" type="text" placeholder="Username"
data-fv-notempty="true"
data-fv-notempty-message="The username is required"
data-fv-stringlength="true"
data-fv-stringlength-min="6"
data-fv-stringlength-max="30"
data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-fv-regexp="true"
data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">Email address</label>
<div class="eight wide field">
<div class="ui input icon">
<input name="email" type="text" placeholder="Email address"
data-fv-notempty="true"
data-fv-notempty-message="The email address is required"
data-fv-emailaddress="true"
data-fv-emailaddress-message="The input is not a valid email address" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">Password</label>
<div class="eight wide field">
<div class="ui input icon">
<input name="password" type="password" placeholder="Password"
data-fv-notempty="true"
data-fv-notempty-message="The password is required"
data-fv-different="true"
data-fv-different-field="username"
data-fv-different-message="The password cannot be the same as username" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">Gender</label>
<div class="ten wide field">
<div class="ui input icon">
<div class="ui radio checkbox">
<input name="gender" type="radio" value="male"
data-fv-notempty="true"
data-fv-notempty-message="The gender is required" /> <label>Male</label>
</div>
<div class="ui radio checkbox">
<input name="gender" type="radio" value="female" /> <label>Female</label>
</div>
<div class="ui radio checkbox">
<input name="gender" type="radio" value="other" /> <label>Other</label>
</div>
</div>
</div>
</div>
<div class="fields">
<label class="four wide field">
<span class="right" id="captchaOperation"></span>
</label>
<div class="four wide field">
<div class="ui input icon">
<input type="text" name="captcha"
data-fv-callback="true"
data-fv-callback-callback="checkCaptcha"
data-fv-callback-message="Wrong answer" />
</div>
</div>
</div>
<div class="fields">
<label class="four wide field"></label>
<div class="ten wide field">
<div class="ui input icon">
<div class="ui checkbox">
<input name="agree" type="checkbox"
data-fv-notempty="true"
data-fv-notempty-message="You must agree with the terms and conditions" /> <label>Agree with the terms and conditions</label>
</div>
</div>
</div>
</div>
<div class="fields">
<label class="four wide field"></label>
<div class="eight wide field">
<button type="submit" class="ui primary button">Submit</button>
</div>
</div>
</form>
<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicSemanticForm').formValidation();
});
</script><form id="basicUikitForm" class="uk-form uk-form-horizontal"
data-fv-framework="uikit"
data-fv-icon-valid="uk-icon-check"
data-fv-icon-invalid="uk-icon-times"
data-fv-icon-validating="uk-icon-refresh">
<div class="uk-form-row">
<label class="uk-form-label">Full name</label>
<div class="uk-form-controls">
<div class="uk-grid">
<div class="uk-width-1-2">
<input class="uk-width-1-1" name="firstName" type="text" placeholder="First name"
data-fv-row=".uk-width-1-2"
data-fv-notempty="true"
data-fv-notempty-message="The first name is required" />
</div>
<div class="uk-width-1-2">
<input class="uk-width-1-1" name="lastName" type="text" placeholder="Last name"
data-fv-row=".uk-width-1-2"
data-fv-notempty="true"
data-fv-notempty-message="The last name is required" />
</div>
</div>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Username</label>
<div class="uk-form-controls">
<input name="username" type="text" placeholder="Username"
data-fv-notempty="true"
data-fv-notempty-message="The username is required"
data-fv-stringlength="true"
data-fv-stringlength-min="6"
data-fv-stringlength-max="30"
data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-fv-regexp="true"
data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Email address</label>
<div class="uk-form-controls">
<input name="email" type="text" placeholder="Email address"
data-fv-notempty="true"
data-fv-notempty-message="The email address is required"
data-fv-emailaddress="true"
data-fv-emailaddress-message="The input is not a valid email address" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Password</label>
<div class="uk-form-controls">
<input name="password" type="password" placeholder="Password"
data-fv-notempty="true"
data-fv-notempty-message="The password is required"
data-fv-different="true"
data-fv-different-field="username"
data-fv-different-message="The password cannot be the same as username" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Gender</label>
<div class="uk-form-controls">
<label>
<input name="gender" type="radio" value="male"
data-fv-notempty="true"
data-fv-notempty-message="The gender is required" /> Male
</label> <br/>
<label><input name="gender" type="radio" value="female" /> Female</label> <br/>
<label><input name="gender" type="radio" value="other" /> Other</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label" id="captchaOperation"></label>
<div class="uk-form-controls">
<input type="text" name="captcha"
data-fv-callback="true"
data-fv-callback-callback="checkCaptcha"
data-fv-callback-message="Wrong answer" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<label>
<input name="agree" type="checkbox"
data-fv-notempty="true"
data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<button type="submit" class="uk-button uk-button-primary">Submit</button>
</div>
</div>
</form>
<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicUikitForm').formValidation();
});
</script>Download
The latest version, v0.8.1, is released on 2016.07.29.
Please take a look at the Upgrading guide if you want to upgrade from v0.7.1 to v0.8.x
Developer commercial license
50$
For individual developers
Each individual developer needs to purchase a separate license
Free lifetime upgrade
Use in multiple websites
Full source code
Buy with Paypal
50$Organization commercial license
200$
For an organization with a team of developers
Covers all developers working within the organization
Free lifetime upgrade
Use in multiple websites
Full source code
Buy with Paypal
200$All transactions are processed on Sellfy and GumRoad through an encrypted HTTP Secure connection
Just grabbed FormValidation license. It's perfect for #bootstrap projects. Very worth.— @timkinnane
Just bought a copy of formvalidation.io - looks extremely well built and is designed to work with bootstrap!— @sitesbyjoe
Awesome jQuery plugin for form validation http://formvalidation.io @formvalidation #jquery #FormValidation— @barrylangdon1
Just had a fantastic development experience with @formvalidation using @twbootstrap and @jquery. You're a champion!— @imagineteamsol
Fantastic support from @formvalidation. Several emails back and forth and completely sorted within a couple of hours. #worthpraising— @JonStanton
@formvalidation AMAZING solution and very declarative source code. This is TOP support! Keep on doing the good work. I became a fan!— @johnnydriesen