FormValidation v0.8.0 is released, supports Bootstrap 4 alpha and Foundation 6

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 class

The 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/css
src/css
Consists of CSS file that defines CSS classes for styling elements
dist/js/framework
src/js/framework
Consists of Javascript files that support specific framework. You only need to include one file associating with current used framework
dist/js/language
stc/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:

No. Language File Name Translated By
- English built in en_US.js @nghuuphuoc
1 Albanian sq_AL.js @desaretiuss
2 Arabic ar_MA.js @Arkni
3 Basque eu_ES.js @xabikip
4 Belgium (French) fr_BE.js @neilime
5 Belgium (Netherland) nl_BE.js @dokterpasta
6 Bulgarian bg_BG.js @mraiur
7 Catalan ca_ES.js @ArnauAregall
8 Chilean Spanish es_CL.js @marceloampuerop6
9 Chinese zh_CN.js @shamiao
10 Czech cs_CZ.js @AdwinTrave@budik21@cuchac
11 Danish da_DK.js @Djarnis
12 Dutch (Netherland) nl_NL.js @JvanderHeide
13 Finnish fi_FI.js @traone
14 French fr_FR.js @dlucazeau@jazzzz@neilime
15 German de_DE.js @logemann
16 Greek el_GR.js @pRieStaKos
17 Hebrew he_IL.js @yakidahan
18 Hindi hi_IN.js @gladiatorAsh
19 Hungarian hu_HU.js @blackfyre
20 Indonesian id_ID.js @egig
21 Italian it_IT.js @maramazza
22 Japanese ja_JP.js @tsuyoshifujii
23 Norwegian no_NO.js @trondulseth
24 Persian (Farsi) fa_IR.js @i0
25 Polish pl_PL.js @grzesiek@lukaszbanasiak
26 Portuguese (Brazil) pt_BR.js @marcuscarvalho6@dgmike
27 Portuguese (Portugal) pt_PT.js @rtbfreitas
28 Romanian ro_RO.js @filipac
29 Russian ru_RU.js @cylon-v@stepin
30 Serbian sr_RS.js @markocrni
31 Slovak sk_SK.js @budik21
32 Spanish es_ES.js @vadail
33 Swedish sv_SE.js @ulsa
34 Taiwanese zh_TW.js @tureki
35 Thai th_TH.js @figgaro
36 Turkish tr_TR.js @CeRBeR666
37 Ukrainian ua_UA.js @oleg-voloshyn
38 Vietnamese vi_VN.js @nghuuphuoc
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 2) -->
<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="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: '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 form-control-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 form-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 row">
        <label class="col-xs-3">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 row">
        <label class="col-xs-3">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 row">
        <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: '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 form-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 row">
        <label class="col-xs-2 form-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 row">
        <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: '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 form-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 row">
        <label class="col-xs-3 form-control-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 form-control-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 form-control-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="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 row">
        <label class="col-xs-3 form-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 row">
        <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: '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 form-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 row">
        <label class="col-xs-3 form-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 row">
        <label class="col-xs-3 form-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 row">
        <label class="col-xs-3 form-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 row">
        <label class="col-xs-3">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 row">
        <label class="col-xs-3 form-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 row">
        <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" 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>