FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Download

Please choose the right package to purchase

Give it a try

Below is basic working examples of FormValidation using with Bootstrap, Foundation, Pure, Semantic UI and UIKit frameworks.

FormValidation is designed to work with almost frameworks. This section demonstrates the ability of using it with other frameworks (Skeleton, Spectre, etc.) and form builders (JotForm, etc.)
The latest stable version of FormValidation supports Bootstrap 3 (v3.3.7), Bootstrap 4 (v4.0.0-alpha.3), Foundation 5 (v5.5.3), Foundation 6 (v6.2.3), Pure (v0.6.0), Semantic UI (v2.2.2), and UIKit (v2.26.4)
<form id="basicBootstrapForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Gender</label>
        <div class="col-xs-6">
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="male" /> Male
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="female" /> Female
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="other" /> Other
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label" id="captchaOperation"></label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="captcha" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-6 col-xs-offset-3">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicBootstrapForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            },
            agree: {
                validators: {
                    notEmpty: {
                        message: 'You must agree with the terms and conditions'
                    }
                }
            }
        }
    });
});
</script>
<form id="basicBootstrap4Form">
    <div class="form-group row">
        <label class="col-xs-3 col-form-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3 col-form-label">Username</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3 col-form-label">Email address</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3 col-form-label">Password</label>
        <div class="col-xs-6">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3">Gender</label>
        <div class="col-xs-6">
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="gender" value="male" /> Male
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="gender" value="female" /> Female
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="gender" value="other" /> Other
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3 col-form-label" id="captchaOperation"></label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="captcha" />
        </div>
    </div>

    <div class="form-group row">
        <div class="col-xs-9 offset-xs-3">
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-xs-9 offset-xs-3">
            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicBootstrap4Form').formValidation({
        framework: 'bootstrap4',
        icon: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        },
        fields: {
            firstName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            },
            agree: {
                validators: {
                    notEmpty: {
                        message: 'You must agree with the terms and conditions'
                    }
                }
            }
        }
    });
});
</script>
<form id="basicFoundation5Form" class="fv-form-horizontal">
    <div class="row">
        <div class="small-3 columns">
            <label class="right inline">Full name</label>
        </div>
        <div class="small-9 columns">
            <div class="row">
                <div class="small-6 columns">
                    <input type="text" name="firstName" placeholder="First name" />
                </div>

                <div class="small-6 columns">
                    <input type="text" name="lastName" placeholder="Last name" />
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline">Username</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="text" name="username" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline">Email address</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="text" name="email" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline">Password</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="password" name="password" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right">Gender</label>
        </div>
        <div class="small-9 columns">
            <input type="radio" id="maleRadio" name="gender" value="male" /><label for="maleRadio">Male</label>
            <input type="radio" id="femaleRadio" name="gender" value="female" /><label for="femaleRadio">Female</label>
            <input type="radio" id="otherRadio" name="gender" value="other" /><label for="otherRadio">Other</label>
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline" id="captchaOperation"></label>
        </div>
        <div class="small-3 small-pull-6 columns">
            <input type="text" name="captcha" />
        </div>
    </div>

    <div class="row">
        <div class="small-9 small-push-3 columns">
            <input type="checkbox" id="agreeCheckbox" name="agree" value="agree" /> <label for="agreeCheckbox">Agree with the terms and conditions</label>
        </div>
    </div>

    <div class="row">
        <div class="small-9 small-push-3 columns">
            <button type="submit" class="button small" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicFoundation5Form').formValidation({
        framework: 'foundation5',
        icon: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        },
        fields: {
            firstName: {
                row: '.small-6',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.small-6',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            },
            agree: {
                validators: {
                    notEmpty: {
                        message: 'You must agree with the terms and conditions'
                    }
                }
            }
        }
    });
});
</script>
<form id="basicFoundationForm">
    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle">Full name</label>
        </div>
        <div class="small-9 columns">
            <div class="row">
                <div class="small-6 columns">
                    <input type="text" name="firstName" placeholder="First name" />
                </div>

                <div class="small-6 columns">
                    <input type="text" name="lastName" placeholder="Last name" />
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle">Username</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="text" name="username" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle">Email address</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="text" name="email" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle">Password</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="password" name="password" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right">Gender</label>
        </div>
        <div class="small-9 columns">
            <input type="radio" id="maleRadio" name="gender" value="male" /><label for="maleRadio">Male</label>
            <input type="radio" id="femaleRadio" name="gender" value="female" /><label for="femaleRadio">Female</label>
            <input type="radio" id="otherRadio" name="gender" value="other" /><label for="otherRadio">Other</label>
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle" id="captchaOperation"></label>
        </div>
        <div class="small-3 small-pull-6 columns">
            <input type="text" name="captcha" />
        </div>
    </div>

    <div class="row">
        <div class="small-9 small-push-3 columns">
            <input type="checkbox" id="agreeCheckbox" name="agree" value="agree" /> <label for="agreeCheckbox">Agree with the terms and conditions</label>
        </div>
    </div>

    <div class="row">
        <div class="small-9 small-push-3 columns">
            <button type="submit" class="button" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicFoundationForm').formValidation({
        framework: 'foundation',
        icon: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        },
        fields: {
            firstName: {
                row: '.small-6',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.small-6',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            },
            agree: {
                validators: {
                    notEmpty: {
                        message: 'You must agree with the terms and conditions'
                    }
                }
            }
        }
    });
});
</script>
<form id="basicPureForm" class="pure-form pure-form-aligned">
    <div class="pure-control-group">
        <label>Full name</label>
        <input name="firstName" type="text" placeholder="First name" />
    </div>

    <div class="pure-control-group">
        <label></label>
        <input name="lastName" type="text" placeholder="Last name" />
    </div>

    <div class="pure-control-group">
        <label>Username</label>
        <input name="username" type="text" placeholder="Username" />
    </div>

    <div class="pure-control-group">
        <label>Email address</label>
        <input name="email" type="text" placeholder="Email address" />
    </div>

    <div class="pure-control-group">
        <label>Password</label>
        <input name="password" type="password" placeholder="Password" />
    </div>

    <div class="pure-control-group">
        <label>Gender</label>
        <input name="gender" type="radio" value="male" /> Male<br/>
        <label></label>
        <input name="gender" type="radio" value="female" /> Female<br/>
        <label></label>
        <input name="gender" type="radio" value="other" /> Other<br/>
    </div>

    <div class="pure-control-group">
        <label id="captchaOperation"></label>
        <input type="text" name="captcha" />
    </div>

    <div class="pure-control-group">
        <label></label>
        <input name="agree" type="checkbox" /> Agree with the terms and conditions
    </div>

    <div class="pure-control-group">
        <label></label>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </div>
</form>

<script>
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicPureForm').formValidation({
        framework: 'pure',
        icon: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        },
        fields: {
            firstName: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            },
            agree: {
                validators: {
                    notEmpty: {
                        message: 'You must agree with the terms and conditions'
                    }
                }
            }
        }
    });
});
</script>
<form id="basicSemanticForm" class="ui form">
    <div class="fields">
        <label class="four wide field">Full name</label>
        <div class="six wide field">
            <div class="ui input icon">
                <input name="firstName" type="text" placeholder="First name" />
            </div>
        </div>
        <div class="six wide field">
            <div class="ui input icon">
                <input name="lastName" type="text" placeholder="Last name" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">Username</label>
        <div class="eight wide field">
            <div class="ui input icon">
                <input name="username" type="text" placeholder="Username" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">Email address</label>
        <div class="eight wide field">
            <div class="ui input icon">
                <input name="email" type="text" placeholder="Email address" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">Password</label>
        <div class="eight wide field">
            <div class="ui input icon">
                <input name="password" type="password" placeholder="Password" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">Gender</label>
        <div class="ten wide field">
            <div class="ui input icon">
                <div class="ui radio checkbox">
                    <input name="gender" type="radio" value="male" /> <label>Male</label>
                </div>
                <div class="ui radio checkbox">
                    <input name="gender" type="radio" value="female" /> <label>Female</label>
                </div>
                <div class="ui radio checkbox">
                    <input name="gender" type="radio" value="other" /> <label>Other</label>
                </div>
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">
            <span class="right" id="captchaOperation"></span>
        </label>
        <div class="four wide field">
            <div class="ui input icon">
                <input type="text" name="captcha" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field"></label>
        <div class="ten wide field">
            <div class="ui input icon">
                <div class="ui checkbox">
                    <input name="agree" type="checkbox" /> <label>Agree with the terms and conditions</label>
                </div>
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field"></label>
        <div class="eight wide field">
            <button type="submit" class="ui primary button">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicSemanticForm').formValidation({
        framework: 'semantic',
        icon: {
            valid: 'checkmark icon',
            invalid: 'remove icon',
            validating: 'refresh icon'
        },
        fields: {
            firstName: {
                row: '.six',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.six',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            },
            agree: {
                validators: {
                    notEmpty: {
                        message: 'You must agree with the terms and conditions'
                    }
                }
            }
        }
    });
});
</script>
<form id="basicUikitForm" class="uk-form uk-form-horizontal">
    <div class="uk-form-row">
        <label class="uk-form-label">Full name</label>
        <div class="uk-form-controls">
            <div class="uk-grid">
                <div class="uk-width-1-2">
                    <input class="uk-width-1-1" name="firstName" type="text" placeholder="First name" />
                </div>

                <div class="uk-width-1-2">
                    <input class="uk-width-1-1" name="lastName" type="text" placeholder="Last name" />
                </div>
            </div>
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label">Username</label>
        <div class="uk-form-controls">
            <input name="username" type="text" placeholder="Username" />
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label">Email address</label>
        <div class="uk-form-controls">
            <input name="email" type="text" placeholder="Email address" />
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label">Password</label>
        <div class="uk-form-controls">
            <input name="password" type="password" placeholder="Password" />
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label">Gender</label>
        <div class="uk-form-controls">
            <label><input name="gender" type="radio" value="male" /> Male</label> <br/>
            <label><input name="gender" type="radio" value="female" /> Female</label> <br/>
            <label><input name="gender" type="radio" value="other" /> Other</label>
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label" id="captchaOperation"></label>
        <div class="uk-form-controls">
            <input type="text" name="captcha" />
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">
            <label>
                <input name="agree" type="checkbox" /> Agree with the terms and conditions
            </label>
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">
            <button type="submit" class="uk-button uk-button-primary">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicUikitForm').formValidation({
        framework: 'uikit',
        icon: {
            valid: 'uk-icon-check',
            invalid: 'uk-icon-times',
            validating: 'uk-icon-refresh'
        },
        fields: {
            firstName: {
                row: '.uk-width-1-2',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.uk-width-1-2',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator, $field) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            },
            agree: {
                validators: {
                    notEmpty: {
                        message: 'You must agree with the terms and conditions'
                    }
                }
            }
        }
    });
});
</script>
<form id="basicBootstrapForm" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name"
                data-fv-row=".col-xs-4"
                data-fv-notempty="true"
                data-fv-notempty-message="The first name is required" />
        </div>

        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name"
                data-fv-row=".col-xs-4"
                data-fv-notempty="true"
                data-fv-notempty-message="The last name is required" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="username"
                data-fv-notempty="true"
                data-fv-notempty-message="The username is required"

                data-fv-stringlength="true"
                data-fv-stringlength-min="6"
                data-fv-stringlength-max="30"
                data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"

                data-fv-regexp="true"
                data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="email"
                data-fv-notempty="true"
                data-fv-notempty-message="The email address is required"

                data-fv-emailaddress="true"
                data-fv-emailaddress-message="The input is not a valid email address" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="password"
                data-fv-notempty="true"
                data-fv-notempty-message="The password is required"

                data-fv-different="true"
                data-fv-different-field="username"
                data-fv-different-message="The password cannot be the same as username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Gender</label>
        <div class="col-xs-6">
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="male"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The gender is required" /> Male
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="female" /> Female
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="gender" value="other" /> Other
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label" id="captchaOperation"></label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="captcha"
                data-fv-callback="true"
                data-fv-callback-callback="checkCaptcha"
                data-fv-callback-message="Wrong answer" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-6 col-xs-offset-3">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="agree" value="agree"
                        data-fv-notempty="true"
                        data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
    return value == sum;
}

$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicBootstrapForm').formValidation();
});
</script>
<form id="basicBootstrap4Form"
    data-fv-framework="bootstrap4"
    data-fv-icon-valid="fa fa-check"
    data-fv-icon-invalid="fa fa-times"
    data-fv-icon-validating="fa fa-refresh">

    <div class="form-group row">
        <label class="col-xs-3 col-form-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name"
                data-fv-row=".col-xs-4"
                data-fv-notempty="true"
                data-fv-notempty-message="The first name is required" />
        </div>

        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name"
                data-fv-row=".col-xs-4"
                data-fv-notempty="true"
                data-fv-notempty-message="The last name is required" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3 col-form-label">Username</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="username"
                data-fv-notempty="true"
                data-fv-notempty-message="The username is required"

                data-fv-stringlength="true"
                data-fv-stringlength-min="6"
                data-fv-stringlength-max="30"
                data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"

                data-fv-regexp="true"
                data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3 col-form-label">Email address</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="email"
                data-fv-notempty="true"
                data-fv-notempty-message="The email address is required"

                data-fv-emailaddress="true"
                data-fv-emailaddress-message="The input is not a valid email address" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3 col-form-label">Password</label>
        <div class="col-xs-6">
            <input type="password" class="form-control" name="password"
                data-fv-notempty="true"
                data-fv-notempty-message="The password is required"

                data-fv-different="true"
                data-fv-different-field="username"
                data-fv-different-message="The password cannot be the same as username" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3">Gender</label>
        <div class="col-xs-6">
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="gender" value="male"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The gender is required" /> Male
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="gender" value="female" /> Female
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="gender" value="other" /> Other
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-xs-3 col-form-label" id="captchaOperation"></label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="captcha"
                data-fv-callback="true"
                data-fv-callback-callback="checkCaptcha"
                data-fv-callback-message="Wrong answer" />
        </div>
    </div>

    <div class="form-group row">
        <div class="col-xs-9 offset-xs-3">
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="agree" value="agree"
                        data-fv-notempty="true"
                        data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-xs-9 offset-xs-3">
            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
    return value == sum;
}

$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicBootstrap4Form').formValidation();
});
</script>
<form id="basicFoundation5Form" class="fv-form-horizontal"
    data-fv-framework="foundation5"
    data-fv-icon-valid="fa fa-check"
    data-fv-icon-invalid="fa fa-times"
    data-fv-icon-validating="fa fa-refresh">

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline">Full name</label>
        </div>
        <div class="small-9 columns">
            <div class="row">
                <div class="small-6 columns">
                    <input type="text" name="firstName" placeholder="First name"
                        data-fv-row=".small-6"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The first name is required"/>
                </div>

                <div class="small-6 columns">
                    <input type="text" name="lastName" placeholder="Last name"
                        data-fv-row=".small-6"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The last name is required" />
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline">Username</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="text" name="username"
                data-fv-notempty="true"
                data-fv-notempty-message="The username is required"

                data-fv-stringlength="true"
                data-fv-stringlength-min="6"
                data-fv-stringlength-max="30"
                data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"

                data-fv-regexp="true"
                data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline">Email address</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="text" name="email"
                data-fv-notempty="true"
                data-fv-notempty-message="The email address is required"

                data-fv-emailaddress="true"
                data-fv-emailaddress-message="The input is not a valid email address" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline">Password</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="password" name="password"
                data-fv-notempty="true"
                data-fv-notempty-message="The password is required"

                data-fv-different="true"
                data-fv-different-field="username"
                data-fv-different-message="The password cannot be the same as username" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right">Gender</label>
        </div>
        <div class="small-9 columns">
            <input type="radio" name="gender" value="male"
                data-fv-notempty="true"
                data-fv-notempty-message="The gender is required" /><label>Male</label>
            <input type="radio" name="gender" value="female" /><label>Female</label>
            <input type="radio" name="gender" value="other" /><label>Other</label>
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="right inline" id="captchaOperation"></label>
        </div>
        <div class="small-3 small-pull-6 columns">
            <input type="text" name="captcha"
                data-fv-callback="true"
                data-fv-callback-callback="checkCaptcha"
                data-fv-callback-message="Wrong answer" />
        </div>
    </div>

    <div class="row">
        <div class="small-9 small-push-3 columns">
            <input type="checkbox" name="agree" value="agree"
                data-fv-notempty="true"
                data-fv-notempty-message="You must agree with the terms and conditions" /> <label>Agree with the terms and conditions</label>
        </div>
    </div>

    <div class="row">
        <div class="small-9 small-push-3 columns">
            <button type="submit" class="button small" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
    return value == sum;
}

$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicFoundation5Form').formValidation();
});
</script>
<form id="basicFoundationForm"
    data-fv-framework="foundation"
    data-fv-icon-valid="fa fa-check"
    data-fv-icon-invalid="fa fa-times"
    data-fv-icon-validating="fa fa-refresh">

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle">Full name</label>
        </div>
        <div class="small-9 columns">
            <div class="row">
                <div class="small-6 columns">
                    <input type="text" name="firstName" placeholder="First name"
                        data-fv-row=".small-6"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The first name is required"/>
                </div>

                <div class="small-6 columns">
                    <input type="text" name="lastName" placeholder="Last name"
                        data-fv-row=".small-6"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The last name is required" />
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle">Username</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="text" name="username"
                data-fv-notempty="true"
                data-fv-notempty-message="The username is required"

                data-fv-stringlength="true"
                data-fv-stringlength-min="6"
                data-fv-stringlength-max="30"
                data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"

                data-fv-regexp="true"
                data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle">Email address</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="text" name="email"
                data-fv-notempty="true"
                data-fv-notempty-message="The email address is required"

                data-fv-emailaddress="true"
                data-fv-emailaddress-message="The input is not a valid email address" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle">Password</label>
        </div>
        <div class="small-6 small-pull-3 columns">
            <input type="password" name="password"
                data-fv-notempty="true"
                data-fv-notempty-message="The password is required"

                data-fv-different="true"
                data-fv-different-field="username"
                data-fv-different-message="The password cannot be the same as username" />
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right">Gender</label>
        </div>
        <div class="small-9 columns">
            <input type="radio" name="gender" value="male"
                data-fv-notempty="true"
                data-fv-notempty-message="The gender is required" /><label>Male</label>
            <input type="radio" name="gender" value="female" /><label>Female</label>
            <input type="radio" name="gender" value="other" /><label>Other</label>
        </div>
    </div>

    <div class="row">
        <div class="small-3 columns">
            <label class="text-right middle" id="captchaOperation"></label>
        </div>
        <div class="small-3 small-pull-6 columns">
            <input type="text" name="captcha"
                data-fv-callback="true"
                data-fv-callback-callback="checkCaptcha"
                data-fv-callback-message="Wrong answer" />
        </div>
    </div>

    <div class="row">
        <div class="small-9 small-push-3 columns">
            <input type="checkbox" name="agree" value="agree"
                data-fv-notempty="true"
                data-fv-notempty-message="You must agree with the terms and conditions" /> <label>Agree with the terms and conditions</label>
        </div>
    </div>

    <div class="row">
        <div class="small-9 small-push-3 columns">
            <button type="submit" class="button" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
    return value == sum;
}

$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicFoundationForm').formValidation();
});
</script>
<form id="basicPureForm" class="pure-form pure-form-aligned"
    data-fv-framework="pure"
    data-fv-icon-valid="fa fa-check"
    data-fv-icon-invalid="fa fa-times"
    data-fv-icon-validating="fa fa-refresh">

    <div class="pure-control-group">
        <label>Full name</label>
        <input name="firstName" type="text" placeholder="First name"
            data-fv-notempty="true"
            data-fv-notempty-message="The first name is required" />
    </div>

    <div class="pure-control-group">
        <label></label>
        <input name="lastName" type="text" placeholder="Last name"
            data-fv-notempty="true"
            data-fv-notempty-message="The last name is required" />
    </div>

    <div class="pure-control-group">
        <label>Username</label>
        <input name="username" type="text" placeholder="Username"
            data-fv-notempty="true"
            data-fv-notempty-message="The username is required"

            data-fv-stringlength="true"
            data-fv-stringlength-min="6"
            data-fv-stringlength-max="30"
            data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"

            data-fv-regexp="true"
            data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
            data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
    </div>

    <div class="pure-control-group">
        <label>Email address</label>
        <input name="email" type="text" placeholder="Email address"
            data-fv-notempty="true"
            data-fv-notempty-message="The email address is required"

            data-fv-emailaddress="true"
            data-fv-emailaddress-message="The input is not a valid email address" />
    </div>

    <div class="pure-control-group">
        <label>Password</label>
        <input name="password" type="password" placeholder="Password"
            data-fv-notempty="true"
            data-fv-notempty-message="The password is required"

            data-fv-different="true"
            data-fv-different-field="username"
            data-fv-different-message="The password cannot be the same as username" />
    </div>

    <div class="pure-control-group">
        <label>Gender</label>
        <input name="gender" type="radio" value="male"
            data-fv-notempty="true"
            data-fv-notempty-message="The gender is required" /> Male<br/>
        <label></label>
        <input name="gender" type="radio" value="female" /> Female<br/>
        <label></label>
        <input name="gender" type="radio" value="other" /> Other<br/>
    </div>

    <div class="pure-control-group">
        <label id="captchaOperation"></label>
        <input type="text" name="captcha"
            data-fv-callback="true"
            data-fv-callback-callback="checkCaptcha"
            data-fv-callback-message="Wrong answer" />
    </div>

    <div class="pure-control-group">
        <label></label>
        <input name="agree" type="checkbox"
            data-fv-notempty="true"
            data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
    </div>

    <div class="pure-control-group">
        <label></label>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </div>
</form>

<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
    return value == sum;
}

$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicPureForm').formValidation();
});
</script>
<form id="basicSemanticForm" class="ui grid form fv-form-horizontal"
    data-fv-framework="semantic"
    data-fv-icon-valid="checkmark icon"
    data-fv-icon-invalid="remove icon"
    data-fv-icon-validating="refresh icon">

    <div class="fields">
        <label class="four wide field">Full name</label>
        <div class="six wide field">
            <div class="ui input icon">
                <input name="firstName" type="text" placeholder="First name"
                    data-fv-row=".six"
                    data-fv-notempty="true"
                    data-fv-notempty-message="The first name is required" />
            </div>
        </div>

        <div class="six wide field">
            <div class="ui input icon">
                <input name="lastName" type="text" placeholder="Last name"
                    data-fv-row=".six"
                    data-fv-notempty="true"
                    data-fv-notempty-message="The last name is required" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">Username</label>
        <div class="eight wide field">
            <div class="ui input icon">
                <input name="username" type="text" placeholder="Username"
                    data-fv-notempty="true"
                    data-fv-notempty-message="The username is required"

                    data-fv-stringlength="true"
                    data-fv-stringlength-min="6"
                    data-fv-stringlength-max="30"
                    data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"

                    data-fv-regexp="true"
                    data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                    data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">Email address</label>
        <div class="eight wide field">
            <div class="ui input icon">
                <input name="email" type="text" placeholder="Email address"
                    data-fv-notempty="true"
                    data-fv-notempty-message="The email address is required"

                    data-fv-emailaddress="true"
                    data-fv-emailaddress-message="The input is not a valid email address" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">Password</label>
        <div class="eight wide field">
            <div class="ui input icon">
                <input name="password" type="password" placeholder="Password"
                    data-fv-notempty="true"
                    data-fv-notempty-message="The password is required"

                    data-fv-different="true"
                    data-fv-different-field="username"
                    data-fv-different-message="The password cannot be the same as username" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">Gender</label>
        <div class="ten wide field">
            <div class="ui input icon">
                <div class="ui radio checkbox">
                    <input name="gender" type="radio" value="male"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The gender is required" /> <label>Male</label>
                </div>
                <div class="ui radio checkbox">
                    <input name="gender" type="radio" value="female" /> <label>Female</label>
                </div>
                <div class="ui radio checkbox">
                    <input name="gender" type="radio" value="other" /> <label>Other</label>
                </div>
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field">
            <span class="right" id="captchaOperation"></span>
        </label>
        <div class="four wide field">
            <div class="ui input icon">
                <input type="text" name="captcha"
                    data-fv-callback="true"
                    data-fv-callback-callback="checkCaptcha"
                    data-fv-callback-message="Wrong answer" />
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field"></label>
        <div class="ten wide field">
            <div class="ui input icon">
                <div class="ui checkbox">
                    <input name="agree" type="checkbox"
                        data-fv-notempty="true"
                        data-fv-notempty-message="You must agree with the terms and conditions" /> <label>Agree with the terms and conditions</label>
                </div>
            </div>
        </div>
    </div>

    <div class="fields">
        <label class="four wide field"></label>
        <div class="eight wide field">
            <button type="submit" class="ui primary button">Submit</button>
        </div>
    </div>
</form>

<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
    return value == sum;
}

$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicSemanticForm').formValidation();
});
</script>
<form id="basicUikitForm" class="uk-form uk-form-horizontal"
    data-fv-framework="uikit"
    data-fv-icon-valid="uk-icon-check"
    data-fv-icon-invalid="uk-icon-times"
    data-fv-icon-validating="uk-icon-refresh">

    <div class="uk-form-row">
        <label class="uk-form-label">Full name</label>
        <div class="uk-form-controls">
            <div class="uk-grid">
                <div class="uk-width-1-2">
                    <input class="uk-width-1-1" name="firstName" type="text" placeholder="First name"
                        data-fv-row=".uk-width-1-2"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The first name is required" />
                </div>

                <div class="uk-width-1-2">
                    <input class="uk-width-1-1" name="lastName" type="text" placeholder="Last name"
                        data-fv-row=".uk-width-1-2"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The last name is required" />
                </div>
            </div>
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label">Username</label>
        <div class="uk-form-controls">
            <input name="username" type="text" placeholder="Username"
                data-fv-notempty="true"
                data-fv-notempty-message="The username is required"

                data-fv-stringlength="true"
                data-fv-stringlength-min="6"
                data-fv-stringlength-max="30"
                data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"

                data-fv-regexp="true"
                data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label">Email address</label>
        <div class="uk-form-controls">
            <input name="email" type="text" placeholder="Email address"
                data-fv-notempty="true"
                data-fv-notempty-message="The email address is required"

                data-fv-emailaddress="true"
                data-fv-emailaddress-message="The input is not a valid email address" />
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label">Password</label>
        <div class="uk-form-controls">
            <input name="password" type="password" placeholder="Password"
                data-fv-notempty="true"
                data-fv-notempty-message="The password is required"

                data-fv-different="true"
                data-fv-different-field="username"
                data-fv-different-message="The password cannot be the same as username" />
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label">Gender</label>
        <div class="uk-form-controls">
            <label>
                <input name="gender" type="radio" value="male"
                    data-fv-notempty="true"
                    data-fv-notempty-message="The gender is required" /> Male
            </label> <br/>
            <label><input name="gender" type="radio" value="female" /> Female</label> <br/>
            <label><input name="gender" type="radio" value="other" /> Other</label>
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label" id="captchaOperation"></label>
        <div class="uk-form-controls">
            <input type="text" name="captcha"
                data-fv-callback="true"
                data-fv-callback-callback="checkCaptcha"
                data-fv-callback-message="Wrong answer" />
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">
            <label>
                <input name="agree" type="checkbox"
                    data-fv-notempty="true"
                    data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
            </label>
        </div>
    </div>

    <div class="uk-form-row">
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">
            <button type="submit" class="uk-button uk-button-primary">Submit</button>
        </div>
    </div>
</form>

<script>
// Check the captcha
function checkCaptcha(value, validator, $field) {
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
    return value == sum;
}

$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

    $('#basicUikitForm').formValidation();
});
</script>

Download

The latest version, v0.8.1, is released on 2016.07.29.

Please take a look at the Upgrading guide if you want to upgrade from v0.7.1 to v0.8.x

Developer commercial license

50$

For individual developers
Each individual developer needs to purchase a separate license
Free lifetime upgrade
Use in multiple websites
Full source code

Buy with Paypal

50$

Buy with Credit Card

Buy now 50$ *

* If you live in a EU country, VAT is charged

Organization commercial license

200$

For an organization with a team of developers
Covers all developers working within the organization
Free lifetime upgrade
Use in multiple websites
Full source code

Buy with Paypal

200$

Buy with Credit Card

Buy now 200$ *

* If you live in a EU country, VAT is charged

All transactions are processed on Sellfy and GumRoad through an encrypted HTTP Secure connection

@formvalidation Money well spent. A must have plug-in if you use #Bootstrap regularly.
@Agarney

Just grabbed FormValidation license. It's perfect for #bootstrap projects. Very worth.
@timkinnane

Buy a license for @formvalidation. It's best tool I ever used.
@RC_Programmers

Just bought a copy of formvalidation.io - looks extremely well built and is designed to work with bootstrap!
@sitesbyjoe

Awesome jQuery plugin for form validation http://formvalidation.io @formvalidation #jquery #FormValidation
@barrylangdon1

Wow , Its Very Awesome for Form Validation I Recommend use it <3 @formvalidation
@Mahdixco

Just had a fantastic development experience with @formvalidation using @twbootstrap and @jquery. You're a champion!
@imagineteamsol

Fantastic support from @formvalidation. Several emails back and forth and completely sorted within a couple of hours. #worthpraising
@JonStanton

@formvalidation AMAZING solution and very declarative source code. This is TOP support! Keep on doing the good work. I became a fan!
@johnnydriesen