Getting Started
Getting used with FormValidation
What's included?
The FormValidation package consists of the following files:
formvalidation/
├── dist
│ ├── css
│ │ └── formValidation(.min).css
│ │
│ └── js
│ ├── framework
│ │ ├── bootstrap(.min).js
│ │ ├── bootstrap4(.min).js
│ │ ├── foundation(.min).js
│ │ ├── foundation5(.min).js
│ │ ├── pure(.min).js
│ │ ├── semantic(.min).js
│ │ └── uikit(.min).js
│ │
│ ├── language
│ │ ├── de_DE.js
│ │ ├── en_US.js
│ │ └── ...
│ │
│ ├── formValidation(.min).js
│ └── formValidation.popular(.min).js
│
└── src
├── css
│ ├── framework
│ │ ├── bootstrap.css
│ │ ├── foundation.css
│ │ ├── pure.css
│ │ ├── semantic.css
│ │ └── uikit.css
│ │
│ ├── base.css
│ └── formValidation.css
│
└── js
├── framework
│ ├── bootstrap.js
│ ├── foundation.js
│ ├── pure.js
│ ├── semantic.js
│ └── uikit.js
│
├── language
│ ├── de_DE.js
│ ├── en_US.js
│ └── ...
│
├── validator
│ ├── base64.js
│ ├── between.js
│ ├── callback.js
│ └── ...
│
├── base.js // The main plugin source file containing the base class
└── helper.js // Helper classThe src directory consists of the original source files. Meanwhile, the dist directory consists of files which is combined and compressed. It should be used in the production site.
| Directory | Description |
|---|---|
dist/csssrc/css | Consists of CSS file that defines CSS classes for styling elements |
dist/js/frameworksrc/js/framework | Consists of Javascript files that support specific framework. You only need to include one file associating with current used framework |
dist/js/languagestc/js/language | The language packages that provide the default error messages |
src/js/validator | Consists of built-in validators |
dist/js/formValidation(.min).js already include all built-in validators.
dist/js/formValidation.popular(.min).js only consists of most popular validators. This file might be used on a heavy site with needed validators only.
Language packages
FormValidation has been translated into the following languages, which are also available in both src/language and dist/language directories:
If you wonder how to use the language package, then this example is exactly for you
Usage
It takes only 3 steps to use the plugin:
Including library
Choose the framework you are using to see CSS, Javascript files that need to be included in your page (Assuming frameworks and FormValidation are placed in the vendor directory. You might need change the path to these files)
FormValidation requires jQuery v1.9.1 or higher
<!-- Bootstrap CSS v3 -->
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<!-- jQuery v1.9.1 or higher -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/bootstrap.min.js"></script>Don't confuse bootstrap(.min).js file provided by the Bootstrap framework with bootstrap(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.
They are two different files and both of them need to be included as mentioned above.
<!-- Bootstrap CSS v4.0.0 (alpha 3) -->
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<!-- jQuery v1.9.1 or higher -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- Tether library, which is required if you want to use Bootstrap tooltip -->
<script src="/vendor/tether/js/tether.min.js"></script>
<!-- Bootstrap JS -->
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/bootstrap4.min.js"></script>Don't confuse bootstrap(.min).js file provided by the Bootstrap framework with bootstrap4(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.
They are two different files and both of them need to be included as mentioned above.
<!-- Foundation v5 CSS -->
<link rel="stylesheet" href="/vendor/foundation/css/normalize.min.css">
<link rel="stylesheet" href="/vendor/foundation/css/foundation.min.css">
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<!-- jQuery v1.9.1 or higher -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- Foundation JS file -->
<script src="/vendor/foundation/js/vendor/modernizr.js"></script>
<script src="/vendor/foundation/js/foundation/foundation.js"></script>
<script src="/vendor/foundation/js/foundation/foundation.tooltip.js"></script>
<!-- FormValidation plugin and the class supports validating Foundation form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/foundation5.min.js"></script>Don't confuse foundation(.min).js file provided by the Foundation framework with foundation5(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.
They are two different files and both of them need to be included as mentioned above.
<!-- Foundation v6 CSS -->
<link rel="stylesheet" href="/vendor/foundation/css/foundation.min.css">
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<!-- jQuery v1.9.1 or higher -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- Foundation JS file -->
<script src="/vendor/foundation/js/foundation/foundation.min.js"></script>
<!-- FormValidation plugin and the class supports validating Foundation form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/foundation.min.js"></script>Don't confuse foundation(.min).js file provided by the Foundation framework with foundation(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.
They are two different files and both of them need to be included as mentioned above.
<!-- Pure CSS -->
<link rel="stylesheet" href="/vendor/pure/pure-min.css">
<!--[if lte IE 8]><link rel="stylesheet" href="/vendor/pure/grids-responsive-old-ie-min.css"><![endif]-->
<!--[if gt IE 8]><!--><link rel="stylesheet" href="/vendor/pure/grids-responsive-min.css"><!--<![endif]-->
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<!-- jQuery v1.9.1 or higher -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- FormValidation plugin and the class supports validating Pure form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/pure.min.js"></script><!-- Semantic CSS -->
<link rel="stylesheet" href="/vendor/semantic-ui/semantic.min.css">
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<!-- jQuery v1.9.1 or higher -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- Semantic JS -->
<script src="/vendor/semantic-ui/semantic.min.js"></script>
<!-- FormValidation plugin and the class supports validating Semantic form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/semantic.min.js"></script>Don't confuse semantic(.min).js file provided by the Semantic framework with semantic(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.
They are two different files and both of them need to be included as mentioned above.
<!-- UIKit CSS -->
<link rel="stylesheet" href="/vendor/uikit/css/uikit.min.css">
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<!-- jQuery v1.9.1 or higher -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- UIKit JS -->
<script src="/vendor/uikit/js/uikit.min.js"></script>
<!-- FormValidation plugin and the class supports validating Semantic form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/uikit.min.js"></script>Don't confuse uikit(.min).js file provided by the UIKit framework with uikit(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.
They are two different files and both of them need to be included as mentioned above.
If you want to use the default message translated in the language package, then finally include it:
<script src="/vendor/formvalidation/dist/js/language/languagecode_COUNTRYCODE.js"></script>You don't need to require the English package because it is already included in the plugin. The package is available here just for translating into other languages.
The CSS and Javascript files for each framework can be downloaded directly from their official website or from CDN:
Writing form
If your form does NOT follow the format shown in the next section, you will see the following error in the Console window of browser:
// Chrome
Uncaught RangeError: Maximum call stack size exceeded
// Firefox
Too much recursion error For complex form, use the row option
Do NOT use name="submit" or id="submit" attribute for the submit button. Otherwise, the form can't be submitted after validation
The plugin supports all possible kind of forms, including:
Stacked form
<form id="productForm">
<div class="form-group">
<label>Product name</label>
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
<label>Price</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" name="price" />
</div>
</div>
<div class="form-group">
<label>Size</label>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="s" /> S</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="m" /> M</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="l" /> L</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="xl" /> XL</label>
</div>
</div>
<div class="form-group">
<label>Available in store</label>
<div class="radio">
<label><input type="radio" name="availability" value="yes" /> Yes</label>
</div>
<div class="radio">
<label><input type="radio" name="availability" value="no" /> No</label>
</div>
</div>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Add product</button>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm">
<div class="form-group">
<label>Product name</label>
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
<label>Price</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" name="price" />
</div>
</div>
<div class="form-group">
<label>Size</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="size[]" value="s" /> S
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="size[]" value="m" /> M
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="size[]" value="l" /> L
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="size[]" value="xl" /> XL
</label>
</div>
</div>
<div class="form-group">
<label>Available in store</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="availability" value="yes" /> Yes
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="availability" value="no" /> No
</label>
</div>
</div>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Add product</button>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'bootstrap4',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm">
<div class="row">
<div class="small-12 columns">
<label>
Product name
<input type="text" name="name" />
</label>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="row collapse">
<label>Price</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" name="price" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label>Size</label>
<input type="checkbox" name="size[]" value="s" /><label>S</label>
<input type="checkbox" name="size[]" value="m" /><label>M</label>
<input type="checkbox" name="size[]" value="l" /><label>L</label>
<input type="checkbox" name="size[]" value="xl" /><label>XL</label>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label>Available in store</label>
<input type="radio" name="availability" value="yes" /><label>Yes</label>
<input type="radio" name="availability" value="no" /><label>No</label>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button small">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm">
<div class="row">
<div class="small-12 columns">
<label>
Product name
<input type="text" name="name" />
</label>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label>
Price
<div class="input-group">
<span class="input-group-label">$</span>
<input type="text" class="input-group-field" name="price" />
</div>
</label>
</div>
</div>
<div class="row">
<fieldset class="small-12 columns">
<legend>Size</legend>
<input type="checkbox" id="sizeSCheckbox" name="size[]" value="s" /><label for="sizeSCheckbox">S</label>
<input type="checkbox" id="sizeMCheckbox" name="size[]" value="m" /><label for="sizeMCheckbox">M</label>
<input type="checkbox" id="sizeLCheckbox" name="size[]" value="l" /><label for="sizeLCheckbox">L</label>
<input type="checkbox" id="sizeXLCheckbox" name="size[]" value="xl" /><label for="sizeXLCheckbox">XL</label>
</fieldset>
</div>
<div class="row">
<fieldset class="small-12 columns">
<legend>Available in store</legend>
<input type="radio" id="availableRadio" name="availability" value="yes" /><label for="availableRadio">Yes</label>
<input type="radio" id="notAvailableRadio" name="availability" value="no" /><label for="notAvailableRadio">No</label>
</fieldset>
</div>
<div class="row">
<div class="small-12 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'foundation',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm" class="pure-form pure-form-stacked">
<div class="pure-control-group">
<label>Product name</label>
<input type="text" name="name" class="pure-input-1" />
</div>
<div class="pure-control-group">
<label>Price</label>
<input name="price" type="text" />
</div>
<div class="pure-control-group">
<label>Size</label>
<label class="pure-checkbox">
<input type="checkbox" name="size[]" value="s" /> S
</label>
<label class="pure-checkbox">
<input type="checkbox" name="size[]" value="m" /> M
</label>
<label class="pure-checkbox">
<input type="checkbox" name="size[]" value="l" /> L
</label>
<label class="pure-checkbox">
<input type="checkbox" name="size[]" value="xl" /> XL
</label>
</div>
<div class="pure-control-group">
<label>Available in store</label>
<label class="pure-radio">
<input type="radio" name="availability" value="yes" /> Yes
</label>
<label class="pure-radio">
<input type="radio" name="availability" value="no" /> No
</label>
</div>
<div class="pure-control-group">
<label></label>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="pure-button pure-button-primary">Add product</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'pure',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><div class="ui grid">
<div class="twelve wide column centered">
<form id="productForm" class="ui form">
<div class="field">
<label>Product name</label>
<div class="ui input icon">
<input type="text" name="name" />
</div>
</div>
<div class="field">
<label>Price</label>
<div class="ui input icon">
<input type="text" name="price" />
</div>
</div>
<div class="field">
<label>Size</label>
<div class="ten wide field">
<div class="ui input icon">
<div class="ui checkbox">
<input type="checkbox" name="size[]" value="s" /> <label>S</label>
</div>
<div class="ui checkbox">
<input type="checkbox" name="size[]" value="m" /> <label>M</label>
</div>
<div class="ui checkbox">
<input type="checkbox" name="size[]" value="l" /> <label>L</label>
</div>
<div class="ui checkbox">
<input type="checkbox" name="size[]" value="xl" /> <label>XL</label>
</div>
</div>
</div>
</div>
<div class="field">
<label>Available in store</label>
<div class="ten wide field">
<div class="ui input icon">
<div class="ui radio checkbox">
<input type="radio" name="availability" value="yes" /> <label>Yes</label>
</div>
<div class="ui radio checkbox">
<input type="radio" name="availability" value="no" /> <label>No</label>
</div>
</div>
</div>
</div>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="ui primary button">Add product</button>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm" class="uk-form uk-form-stacked">
<div class="uk-form-row">
<label class="uk-form-label">Product name</label>
<div class="uk-form-controls">
<input name="name" type="text" class="uk-width-1-1" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Price</label>
<div class="uk-form-controls">
<input name="price" type="text" class="uk-form-width-small" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Size</label>
<div class="uk-form-controls">
<input type="checkbox" name="size[]" value="s" /> <label>S</label><br />
<input type="checkbox" name="size[]" value="m" /> <label>M</label><br />
<input type="checkbox" name="size[]" value="l" /> <label>L</label><br />
<input type="checkbox" name="size[]" value="xl" /> <label>XL</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Available in store</label>
<div class="uk-form-controls">
<label><input type="radio" name="availability" value="yes" /> Yes</label>
<label><input type="radio" name="availability" value="no" /> No</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="uk-button uk-button-primary">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'uikit',
icon: {
valid: 'uk-icon-check',
invalid: 'uk-icon-times',
validating: 'uk-icon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script>Stacked form without labels
<form id="signinForm">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" />
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" />
</div>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
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'
}
}
}
}
});
});
</script><form id="signinForm">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" />
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" />
</div>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'bootstrap4',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
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'
}
}
}
}
});
});
</script><form id="signinForm">
<div class="row">
<div class="small-12 columns">
<input type="text" name="username" placeholder="Username" />
</div>
</div>
<div class="row">
<div class="small-12 columns">
<input type="password" name="password" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="small-12 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button small">Sign in</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
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'
}
}
}
}
});
});
</script><form id="signinForm">
<div class="row">
<div class="small-12 columns">
<input type="text" name="username" placeholder="Username" />
</div>
</div>
<div class="row">
<div class="small-12 columns">
<input type="password" name="password" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="small-12 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button">Sign in</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'foundation',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
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'
}
}
}
}
});
});
</script><form id="signinForm" class="pure-form pure-form-stacked">
<div class="pure-control-group">
<input type="text" name="username" class="pure-input-1" placeholder="Username" />
</div>
<div class="pure-control-group">
<input type="password" name="password" class="pure-input-1" placeholder="Password" />
</div>
<div class="pure-control-group">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'pure',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
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'
}
}
}
}
});
});
</script><div class="ui grid">
<div class="twelve wide column centered">
<form id="signinForm" class="ui form">
<div class="field">
<div class="ui input icon">
<input type="text" name="username" placeholder="Username" />
</div>
</div>
<div class="field">
<div class="ui input icon">
<input type="password" name="password" placeholder="Password" />
</div>
</div>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="ui primary button">Sign in</button>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
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'
}
}
}
}
});
});
</script><form id="signinForm" class="uk-form uk-form-stacked">
<div class="uk-form-row">
<div class="uk-form-controls">
<input type="text" class="uk-width-1-1" name="username" placeholder="Username" />
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<input type="password" class="uk-width-1-1" name="password" placeholder="Password" />
</div>
</div>
<div class="uk-form-row">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="uk-button uk-button-primary">Sign in</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'uikit',
icon: {
valid: 'uk-icon-check',
invalid: 'uk-icon-times',
validating: 'uk-icon-refresh'
},
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'
}
}
}
}
});
});
</script>Inline form
<form id="signinForm" class="form-inline">
<div class="form-group" style="width: 40%;">
<input type="text" class="form-control" name="username" placeholder="Username" style="width: 100%;" />
</div>
<div class="form-group" style="width: 40%;">
<input type="password" class="form-control" name="password" placeholder="Password" style="width: 100%;" />
</div>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
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'
}
}
}
}
});
});
</script><form id="signinForm" class="form-inline">
<div class="form-group" style="width: 40%;">
<label class="sr-only">Username</label>
<input type="text" class="form-control" name="username" placeholder="Username" style="width: 100%;" />
</div>
<div class="form-group" style="width: 40%;">
<label class="sr-only">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" style="width: 100%;" />
</div>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'bootstrap4',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
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'
}
}
}
}
});
});
</script><form id="signinForm">
<div class="row">
<div class="small-4 columns">
<input type="text" name="username" placeholder="Username" />
</div>
<div class="small-4 columns">
<input type="password" name="password" placeholder="Password" />
</div>
<div class="small-4 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button small">Sign in</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
username: {
row: '.small-4',
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: {
row: '.small-4',
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});
</script><form id="signinForm">
<div class="row">
<div class="small-4 columns">
<input type="text" name="username" placeholder="Username" />
</div>
<div class="small-4 columns">
<input type="password" name="password" placeholder="Password" />
</div>
<div class="small-4 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button">Sign in</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'foundation',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
username: {
row: '.small-4',
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: {
row: '.small-4',
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});
</script><form id="signinForm" class="pure-form">
<div class="pure-g">
<div class="pure-u-md-2-5">
<input type="text" name="username" class="pure-input-1" placeholder="Username" />
</div>
<div class="pure-u-md-2-5">
<input type="password" name="password" class="pure-input-1" placeholder="Password" />
</div>
<div class="pure-u-md-1-5">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'pure',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
username: {
row: '.pure-u-md-2-5',
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: {
row: '.pure-u-md-2-5',
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});
</script><div class="ui grid">
<div class="twelve wide column centered">
<form id="signinForm" class="ui form">
<div class="fields">
<div class="six wide field">
<div class="ui input icon">
<input type="text" name="username" placeholder="Username" />
</div>
</div>
<div class="six wide field">
<div class="ui input icon">
<input type="password" name="password" placeholder="Password" />
</div>
</div>
<div class="four wide field">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="ui primary button">Sign in</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
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'
}
}
}
}
});
});
</script><form id="signinForm" class="uk-form">
<div class="uk-grid">
<div class="uk-width-2-5">
<input type="text" class="uk-width-1-1" name="username" placeholder="Username" />
</div>
<div class="uk-width-2-5">
<input type="password" class="uk-width-1-1" name="password" placeholder="Password" />
</div>
<div class="uk-width-1-5">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="uk-button uk-button-primary">Sign in</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'uikit',
icon: {
valid: 'uk-icon-check',
invalid: 'uk-icon-times',
validating: 'uk-icon-refresh'
},
fields: {
username: {
row: '.uk-width-2-5',
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: {
row: '.uk-width-2-5',
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});
</script>Horizontal form
<form id="productForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Product name</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Price</label>
<div class="col-xs-3">
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" name="price" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Size</label>
<div class="col-xs-6">
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="s" /> S</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="m" /> M</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="l" /> L</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="size[]" value="xl" /> XL</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Available in store</label>
<div class="col-xs-6">
<div class="radio">
<label><input type="radio" name="availability" value="yes" /> Yes</label>
</div>
<div class="radio">
<label><input type="radio" name="availability" value="no" /> No</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-6 col-xs-offset-3">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm">
<div class="form-group row">
<label class="col-xs-3 col-form-label">Product name</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-form-label">Price</label>
<div class="col-xs-3">
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" name="price" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-xs-3">Size</label>
<div class="col-xs-6">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="size[]" value="s" /> S
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="size[]" value="m" /> M
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="size[]" value="l" /> L
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="size[]" value="xl" /> XL
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-xs-3">Available in store</label>
<div class="col-xs-6">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="availability" value="yes" /> Yes
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="availability" value="no" /> No
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 offset-xs-3">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'bootstrap4',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm" class="fv-form-horizontal">
<div class="row">
<div class="small-3 columns">
<label class="right inline">Product name</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="name" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Price</label>
</div>
<div class="small-6 small-pull-3 columns">
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" name="price" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right">Size</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="checkbox" name="size[]" value="s" /><label>S</label>
<input type="checkbox" name="size[]" value="m" /><label>M</label>
<input type="checkbox" name="size[]" value="l" /><label>L</label>
<input type="checkbox" name="size[]" value="xl" /><label>XL</label>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right">Available in store</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="radio" name="availability" value="yes" /><label>Yes</label>
<input type="radio" name="availability" value="no" /><label>No</label>
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button small">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm">
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Product name</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="name" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Price</label>
</div>
<div class="small-6 small-pull-3 columns">
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="text" name="price" />
</div>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right">Size</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="checkbox" name="size[]" value="s" /><label>S</label>
<input type="checkbox" name="size[]" value="m" /><label>M</label>
<input type="checkbox" name="size[]" value="l" /><label>L</label>
<input type="checkbox" name="size[]" value="xl" /><label>XL</label>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right">Available in store</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="radio" name="availability" value="yes" /><label>Yes</label>
<input type="radio" name="availability" value="no" /><label>No</label>
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'foundation',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm" class="pure-form pure-form-aligned">
<div class="pure-control-group">
<label>Product name</label>
<input type="text" name="name" />
</div>
<div class="pure-control-group">
<label>Price</label>
<input name="price" type="text" />
</div>
<div class="pure-control-group">
<label>Size</label>
<input type="checkbox" name="size[]" value="s" /> S<br/>
<label></label>
<input type="checkbox" name="size[]" value="m" /> M<br/>
<label></label>
<input type="checkbox" name="size[]" value="l" /> L<br/>
<label></label>
<input type="checkbox" name="size[]" value="xl" /> XL
</div>
<div class="pure-control-group">
<label>Available in store</label>
<input type="radio" name="availability" value="yes" /> Yes<br/>
<label></label>
<input type="radio" name="availability" value="no" /> No
</div>
<div class="pure-control-group">
<label></label>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="pure-button pure-button-primary">Add product</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'pure',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm" class="ui form">
<div class="fields">
<label class="three wide field">Product name</label>
<div class="eight wide field">
<div class="ui input icon">
<input type="text" name="name" />
</div>
</div>
</div>
<div class="fields">
<label class="three wide field">Price</label>
<div class="eight wide field">
<div class="ui input icon">
<input type="text" name="price" />
</div>
</div>
</div>
<div class="fields">
<label class="three wide field">Size</label>
<div class="eight wide field">
<div class="ui input icon">
<div class="ui checkbox">
<input type="checkbox" name="size[]" value="s" /> <label>S</label>
</div>
<div class="ui checkbox">
<input type="checkbox" name="size[]" value="m" /> <label>M</label>
</div>
<div class="ui checkbox">
<input type="checkbox" name="size[]" value="l" /> <label>L</label>
</div>
<div class="ui checkbox">
<input type="checkbox" name="size[]" value="xl" /> <label>XL</label>
</div>
</div>
</div>
</div>
<div class="fields">
<label class="three wide field">Available in store</label>
<div class="eight wide field">
<div class="ui input icon">
<div class="ui radio checkbox">
<input type="radio" name="availability" value="yes" /> <label>Yes</label>
</div>
<div class="ui radio checkbox">
<input type="radio" name="availability" value="no" /> <label>No</label>
</div>
</div>
</div>
</div>
<div class="fields">
<label class="three wide field"></label>
<div class="eight wide field">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="ui primary button">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script><form id="productForm" class="uk-form uk-form-horizontal">
<div class="uk-form-row">
<label class="uk-form-label">Product name</label>
<div class="uk-form-controls">
<input name="name" type="text" class="uk-width-1-1" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Price</label>
<div class="uk-form-controls">
<input name="price" type="text" class="uk-form-width-small" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Size</label>
<div class="uk-form-controls">
<input type="checkbox" name="size[]" value="s" /> <label>S</label><br />
<input type="checkbox" name="size[]" value="m" /> <label>M</label><br />
<input type="checkbox" name="size[]" value="l" /> <label>L</label><br />
<input type="checkbox" name="size[]" value="xl" /> <label>XL</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Available in store</label>
<div class="uk-form-controls">
<label><input type="radio" name="availability" value="yes" /> Yes</label>
<label><input type="radio" name="availability" value="no" /> No</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="uk-button uk-button-primary">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'uikit',
icon: {
valid: 'uk-icon-check',
invalid: 'uk-icon-times',
validating: 'uk-icon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The name can only consist of alphabetical, number and underscore'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
'size[]': {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
availability: {
validators: {
notEmpty: {
message: 'The availability option is required'
}
}
}
}
});
});
</script>Complex form
It also supports multiple fields on the same row via the row option:
<form id="profileForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">Full name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-5">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Phone number</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="cellPhone" placeholder="Cell" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="homePhone" placeholder="Home" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="officePhone" placeholder="Office" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6 col-xs-offset-2">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Update profile</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-5',
validators: {
notEmpty: {
message: 'The first name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The first name can only consist of alphabetical and space'
}
}
},
lastName: {
row: '.col-xs-5',
validators: {
notEmpty: {
message: 'The last name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The last name can only consist of alphabetical and space'
}
}
},
cellPhone: {
row: '.col-xs-3',
validators: {
notEmpty: {
message: 'The cell phone number is required'
}
}
},
homePhone: {
row: '.col-xs-3',
validators: {
notEmpty: {
message: 'The home phone number is required'
}
}
},
officePhone: {
row: '.col-xs-3',
validators: {
notEmpty: {
message: 'The office phone number is required'
}
}
}
}
});
});
</script><form id="profileForm">
<div class="form-group row">
<label class="col-xs-2 col-form-label">Full name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-5">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group row">
<label class="col-xs-2 col-form-label">Phone number</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="cellPhone" placeholder="Cell" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="homePhone" placeholder="Home" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="officePhone" placeholder="Office" />
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 offset-xs-2">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-primary">Update profile</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'bootstrap4',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
firstName: {
row: '.col-xs-5',
validators: {
notEmpty: {
message: 'The first name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The first name can only consist of alphabetical and space'
}
}
},
lastName: {
row: '.col-xs-5',
validators: {
notEmpty: {
message: 'The last name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The last name can only consist of alphabetical and space'
}
}
},
cellPhone: {
row: '.col-xs-3',
validators: {
notEmpty: {
message: 'The cell phone number is required'
}
}
},
homePhone: {
row: '.col-xs-3',
validators: {
notEmpty: {
message: 'The home phone number is required'
}
}
},
officePhone: {
row: '.col-xs-3',
validators: {
notEmpty: {
message: 'The office phone number is required'
}
}
}
}
});
});
</script><form id="profileForm" class="form-horizontal">
<div class="row">
<div class="small-2 columns">
<label class="right inline">Full name</label>
</div>
<div class="small-5 columns">
<input type="text" name="firstName" placeholder="First name" />
</div>
<div class="small-5 columns">
<input type="text" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="row">
<div class="small-2 columns">
<label class="right inline">Phone number</label>
</div>
<div class="small-3 columns">
<input type="text" name="cellPhone" placeholder="Cell" />
</div>
<div class="small-3 columns">
<input type="text" name="homePhone" placeholder="Home" />
</div>
<div class="small-3 small-pull-1 columns">
<input type="text" name="officePhone" placeholder="Office" />
</div>
</div>
<div class="row">
<div class="small-10 small-push-2 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button small">Update profile</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
firstName: {
row: '.small-5',
validators: {
notEmpty: {
message: 'The first name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The first name can only consist of alphabetical and space'
}
}
},
lastName: {
row: '.small-5',
validators: {
notEmpty: {
message: 'The last name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The last name can only consist of alphabetical and space'
}
}
},
cellPhone: {
row: '.small-3',
validators: {
notEmpty: {
message: 'The cell phone number is required'
}
}
},
homePhone: {
row: '.small-3',
validators: {
notEmpty: {
message: 'The home phone number is required'
}
}
},
officePhone: {
row: '.small-3',
validators: {
notEmpty: {
message: 'The office phone number is required'
}
}
}
}
});
});
</script><form id="profileForm">
<div class="row">
<div class="small-2 columns">
<label class="text-right middle">Full name</label>
</div>
<div class="small-5 columns">
<input type="text" name="firstName" placeholder="First name" />
</div>
<div class="small-5 columns">
<input type="text" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="row">
<div class="small-2 columns">
<label class="text-right middle">Phone number</label>
</div>
<div class="small-3 columns">
<input type="text" name="cellPhone" placeholder="Cell" />
</div>
<div class="small-3 columns">
<input type="text" name="homePhone" placeholder="Home" />
</div>
<div class="small-3 small-pull-1 columns">
<input type="text" name="officePhone" placeholder="Office" />
</div>
</div>
<div class="row">
<div class="small-10 small-push-2 columns">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="button">Update profile</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'foundation',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
firstName: {
row: '.small-5',
validators: {
notEmpty: {
message: 'The first name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The first name can only consist of alphabetical and space'
}
}
},
lastName: {
row: '.small-5',
validators: {
notEmpty: {
message: 'The last name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The last name can only consist of alphabetical and space'
}
}
},
cellPhone: {
row: '.small-3',
validators: {
notEmpty: {
message: 'The cell phone number is required'
}
}
},
homePhone: {
row: '.small-3',
validators: {
notEmpty: {
message: 'The home phone number is required'
}
}
},
officePhone: {
row: '.small-3',
validators: {
notEmpty: {
message: 'The office phone number is required'
}
}
}
}
});
});
</script><form id="profileForm" class="pure-form pure-form-stacked">
<div class="pure-control-group">
<label>Full name</label>
<div class="pure-g">
<div class="pure-u-1-2">
<input class="pure-u-1-1" name="firstName" type="text" placeholder="First name" />
</div>
<div class="pure-u-1-2">
<input class="pure-u-1-1" name="lastName" type="text" placeholder="Last name" />
</div>
</div>
</div>
<div class="pure-control-group">
<label>Phone number</label>
<div class="pure-g">
<div class="pure-u-1-3">
<input class="pure-u-1-1" name="cellPhone" type="text" placeholder="Cell" />
</div>
<div class="pure-u-1-3">
<input class="pure-u-1-1" name="homePhone" type="text" placeholder="Home" />
</div>
<div class="pure-u-1-3">
<input class="pure-u-1-1" name="officePhone" type="text" placeholder="Office" />
</div>
</div>
</div>
<div class="pure-control-group">
<label></label>
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="pure-button pure-button-primary">Update profile</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'pure',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
firstName: {
row: '.pure-u-1-2',
validators: {
notEmpty: {
message: 'The first name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The first name can only consist of alphabetical and space'
}
}
},
lastName: {
row: '.pure-u-1-2',
validators: {
notEmpty: {
message: 'The last name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The last name can only consist of alphabetical and space'
}
}
},
cellPhone: {
row: '.pure-u-1-3',
validators: {
notEmpty: {
message: 'The cell phone number is required'
}
}
},
homePhone: {
row: '.pure-u-1-3',
validators: {
notEmpty: {
message: 'The home phone number is required'
}
}
},
officePhone: {
row: '.pure-u-1-3',
validators: {
notEmpty: {
message: 'The office phone number is required'
}
}
}
}
});
});
</script><div class="ui grid">
<div class="twelve wide column centered">
<form id="profileForm" class="ui form">
<div class="fields">
<div class="eight wide field">
<label>First name</label>
<div class="ui input icon">
<input type="text" name="firstName" />
</div>
</div>
<div class="eight wide field">
<label>Last name</label>
<div class="ui input icon">
<input type="text" name="lastName" />
</div>
</div>
</div>
<div class="fields">
<div class="five wide field">
<label>Cell phone</label>
<div class="ui input icon">
<input type="text" name="cellPhone" />
</div>
</div>
<div class="five wide field">
<label>Home phone</label>
<div class="ui input icon">
<input type="text" name="homePhone" />
</div>
</div>
<div class="five wide field">
<label>Office phone</label>
<div class="ui input icon">
<input type="text" name="officePhone" />
</div>
</div>
</div>
<div class="fields">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="ui primary button">Update profile</button>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The first name can only consist of alphabetical and space'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The last name can only consist of alphabetical and space'
}
}
},
cellPhone: {
validators: {
notEmpty: {
message: 'The cell phone number is required'
}
}
},
homePhone: {
validators: {
notEmpty: {
message: 'The home phone number is required'
}
}
},
officePhone: {
validators: {
notEmpty: {
message: 'The office phone number is required'
}
}
}
}
});
});
</script><form id="productForm" 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 type="text" class="uk-width-1-1" name="firstName" placeholder="First name" />
</div>
<div class="uk-width-1-2">
<input type="text" class="uk-width-1-1" name="lastName" placeholder="Last name" />
</div>
</div>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Phone number</label>
<div class="uk-form-controls">
<div class="uk-grid">
<div class="uk-width-1-3">
<input type="text" class="uk-width-1-1" name="cellPhone" placeholder="Cell" />
</div>
<div class="uk-width-1-3">
<input type="text" class="uk-width-1-1" name="homePhone" placeholder="Home" />
</div>
<div class="uk-width-1-3">
<input type="text" class="uk-width-1-1" name="officePhone" placeholder="Office" />
</div>
</div>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="uk-button uk-button-primary">Update profile</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').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'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The first name can only consist of alphabetical and space'
}
}
},
lastName: {
row: '.uk-width-1-2',
validators: {
notEmpty: {
message: 'The last name is required'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The last name can only consist of alphabetical and space'
}
}
},
cellPhone: {
row: '.uk-width-1-3',
validators: {
notEmpty: {
message: 'The cell phone number is required'
}
}
},
homePhone: {
row: '.uk-width-1-3',
validators: {
notEmpty: {
message: 'The home phone number is required'
}
}
},
officePhone: {
row: '.uk-width-1-3',
validators: {
notEmpty: {
message: 'The office phone number is required'
}
}
}
}
});
});
</script>Calling plugin
Call the plugin to validate the form as following:
$(document).ready(function() {
$(formSelector).formValidation({
// Indicate the framework
// Can be bootstrap, foundation, pure, semantic, uikit
framework: '...',
// Other settings
excluded: ...,
icon: ...,
message: 'This value is not valid',
trigger: null,
fields: ...
});
});For example, to validate a sample signing in form with username and password fields, the plugin might be called as:
$(document).ready(function() {
$('#signinForm').formValidation({
// I am validating Bootstrap form
framework: 'bootstrap',
// Feedback icons
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// List of fields and their validation rules
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
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 and cannot be empty'
}
}
}
}
});
});Look at the Settings page to see the meaning of plugin options.
Example
Below is a classical registration form covering all the steps you've just seen above:
<form id="registrationForm" 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-5">
<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">Date of birth</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD" />
</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() {
$('#registrationForm').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'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm">
<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-5">
<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-5">
<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-5">
<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-5">
<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">Date of birth</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD" />
</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() {
$('#registrationForm').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'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm" 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-6 small-pull-3 columns">
<input type="radio" name="gender" value="male" /><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">Date of birth</label>
</div>
<div class="small-4 small-pull-5 columns">
<input type="text" name="birthday" />
</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() {
$('#registrationForm').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'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm">
<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-6 small-pull-3 columns">
<input type="radio" name="gender" value="male" /><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">Date of birth</label>
</div>
<div class="small-4 small-pull-5 columns">
<input type="text" name="birthday" />
</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() {
$('#registrationForm').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'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm" 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>Date of birth</label>
<input type="text" name="birthday" placeholder="YYYY/MM/DD" />
</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() {
$('#registrationForm').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'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm" class="ui grid form fv-form-horizontal">
<div class="row field">
<label class="four wide column">Full name</label>
<div class="six wide column">
<div class="ui input icon">
<input name="firstName" type="text" placeholder="First name" />
</div>
</div>
<div class="six wide column">
<div class="ui input icon">
<input name="lastName" type="text" placeholder="Last name" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Username</label>
<div class="eight wide column">
<div class="ui input icon">
<input name="username" type="text" placeholder="Username" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Email address</label>
<div class="eight wide column">
<div class="ui input icon">
<input name="email" type="text" placeholder="Email address" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Password</label>
<div class="eight wide column">
<div class="ui input icon">
<input name="password" type="password" placeholder="Password" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Gender</label>
<div class="eight wide column">
<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="row field">
<label class="four wide column">Date of birth</label>
<div class="four wide column">
<div class="ui input icon">
<input type="text" name="birthday" placeholder="YYYY/MM/DD" />
</div>
</div>
</div>
<div class="row">
<label class="four wide column"></label>
<div class="eight wide column">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="ui primary button">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registrationForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
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'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm" 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">Date of birth</label>
<div class="uk-form-controls">
<input type="text" name="birthday" placeholder="YYYY/MM/DD" />
</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() {
$('#registrationForm').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'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm" 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-5">
<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">Date of birth</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD"
data-fv-notempty="true"
data-fv-notempty-message="The date of birth is required"
data-fv-date="true"
data-fv-date-format="YYYY/MM/DD"
data-fv-date-message="The date of birth is not valid" />
</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() {
$('#registrationForm').formValidation();
});
</script><form id="registrationForm"
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-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 row">
<label class="col-xs-3 col-form-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 row">
<label class="col-xs-3 col-form-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 row">
<label class="col-xs-3">Gender</label>
<div class="col-xs-5">
<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">Date of birth</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD"
data-fv-notempty="true"
data-fv-notempty-message="The date of birth is required"
data-fv-date="true"
data-fv-date-format="YYYY/MM/DD"
data-fv-date-message="The date of birth is not valid" />
</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() {
$('#registrationForm').formValidation();
});
</script><form id="registrationForm" 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-6 small-pull-3 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">Date of birth</label>
</div>
<div class="small-4 small-pull-5 columns">
<input type="text" name="birthday" placeholder="YYYY/MM/DD"
data-fv-notempty="true"
data-fv-notempty-message="The date of birth is required"
data-fv-date="true"
data-fv-date-format="YYYY/MM/DD"
data-fv-date-message="The date of birth is not valid" />
</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() {
$('#registrationForm').formValidation();
});
</script><form id="registrationForm"
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-6 small-pull-3 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">Date of birth</label>
</div>
<div class="small-4 small-pull-5 columns">
<input type="text" name="birthday" placeholder="YYYY/MM/DD"
data-fv-notempty="true"
data-fv-notempty-message="The date of birth is required"
data-fv-date="true"
data-fv-date-format="YYYY/MM/DD"
data-fv-date-message="The date of birth is not valid" />
</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() {
$('#registrationForm').formValidation();
});
</script><form id="registrationForm" 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>Date of birth</label>
<input type="text" name="birthday" placeholder="YYYY/MM/DD"
data-fv-notempty="true"
data-fv-notempty-message="The date of birth is required"
data-fv-date="true"
data-fv-date-format="YYYY/MM/DD"
data-fv-date-message="The date of birth is not valid" />
</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() {
$('#registrationForm').formValidation();
});
</script><form id="registrationForm" 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="row field">
<label class="four wide column">Full name</label>
<div class="six wide column">
<div class="ui input icon">
<input name="firstName" type="text" placeholder="First name"
data-fv-notempty="true"
data-fv-notempty-message="The first name is required" />
</div>
</div>
<div class="six wide column">
<div class="ui input icon">
<input name="lastName" type="text" placeholder="Last name"
data-fv-notempty="true"
data-fv-notempty-message="The last name is required" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Username</label>
<div class="eight wide column">
<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="row field">
<label class="four wide column">Email address</label>
<div class="eight wide column">
<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="row field">
<label class="four wide column">Password</label>
<div class="eight wide column">
<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="row field">
<label class="four wide column">Gender</label>
<div class="eight wide column">
<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="row field">
<label class="four wide column">Date of birth</label>
<div class="four wide column">
<div class="ui input icon">
<input type="text" name="birthday" placeholder="YYYY/MM/DD"
data-fv-notempty="true"
data-fv-notempty-message="The date of birth is required"
data-fv-date="true"
data-fv-date-format="YYYY/MM/DD"
data-fv-date-message="The date of birth is not valid" />
</div>
</div>
</div>
<div class="row">
<label class="four wide column"></label>
<div class="eight wide column">
<button type="submit" class="ui primary button">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registrationForm').formValidation();
});
</script><form id="registrationForm" 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">Date of birth</label>
<div class="uk-form-controls">
<input type="text" name="birthday" placeholder="YYYY/MM/DD"
data-fv-notempty="true"
data-fv-notempty-message="The date of birth is required"
data-fv-date="true"
data-fv-date-format="YYYY/MM/DD"
data-fv-date-message="The date of birth is not valid" />
</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() {
$('#registrationForm').formValidation();
});
</script>