JSFiddle - React, Tailwind, and code Playground

by B. Arkni

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="page-header"></div>
            <form id="defaultForm" method="post" class="form-horizontal" action="">
                <div class="form-group">
                    <label class="col-xs-3 control-label" for="name">Age</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" name="age" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-9 col-sm-offset-3">
                        <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
                        <button id="changeAge" class="btn btn-default" type="button">Change age</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    $('#defaultForm')
        .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            age: {
                validators: {
                    notEmpty: {},
                    between: {
                        min: 5,
                        max: 90,
                        message: 'The age should be between 5 and 90'
                    }
                }
            }
        }
    })
    .on('success.form.fv', function (e, data) {
        e.preventDefault();
    });
});

$('#changeAge').on('click', function(e) {
    var message = 'The age should be between 10 and 90';
    $('#defaultForm')
        // Update min & max options
        .formValidation('updateOption', 'age', 'between', 'min', 10)
        .formValidation('updateOption', 'age', 'between', 'max', 90)

        // Update message if you need to
        .formValidation('updateOption', 'age', 'between', 'message', message)

        // You might need to revalidate field
        .formValidation('revalidateField', 'age');
});