JSFiddle - React, Tailwind, and code Playground

by silviagreen

HTML

<script src="http://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css">
<form class="form-horizontal" id="multiform" name="" method="multiform" action="/boo/foo ">
    <!-- Text input-->
    <div class="form-group" id="price_container">
        <label for="price">Asking Price</label>
        <input class="form-control" style="width: 50%;" type="text" id="price" name="price">
    </div>
    <div class="form-group">
        <label for="title">Title</label>
        <input class="form-control" type="text" name="title">
    </div>
    <!-- Button -->
    <div class="form-group">
        <div class="col-md-5 col-md-offset-1">
            <button id="Signup" class="btn btn-success" type="submit">submit</button>
        </div>
    </div>
    <div class="col-md-5 col-md-offset-1">
        <button id="Disable" class="btn btn-danger">disable</button>
    </div>
</form>

CSS

body {
    margin:50px;
}

JavaScript

$(document).ready(function () {
    $('#multiform')
    /* .find('[name="list_type"]')
        .change(function(e) {
           $('#multiform').bootstrapValidator('revalidateField', 'price');
        })
        .end()*/
.bootstrapValidator({
        feedbackIcons: {
            required: 'fa fa-asterisk',
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            price: {
                validators: {
                    notEmpty: {
                        message: 'The price is required and cannot be empty'
                    },
                    integer: {
                        message: 'You can only enter an integer'
                    },
                    regexp: {
                        regexp: /^[0-9]+$/,
                        message: 'The price can only consist of numbers'
                    }
                }
            }
        }


    });

    $(document).on("click", ".btn-danger", function () {
         var bootstrapValidator = $('#multiform').data('bootstrapValidator');
         bootstrapValidator.enableFieldValidators('price', false);
    });

});