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-8 col-sm-offset-2">
            <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">Name</label>
                    <div class="col-xs-5">
                        <input type="text" class="form-control" name="name" value="" placeholder="Enter your name">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3 control-label">Number of inputs</label>
                    <div class="col-xs-5">
                        <select class="form-control" name="inputCount" id="countaccmp">
                            <option value="">Select a number</option>
                            <option value="1">One input</option>
                            <option value="2">Two inputs</option>
                            <option value="3">Three inputs</option>
                            <option value="4">Four inputs</option>
                        </select>
                    </div>
                </div>
                <div id="textboxDiv">

                </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...

JavaScript

$(document).ready(function () {
    $('#defaultForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {}
                    }
                }
            }
        })
        .on('success.form.fv', function (e, data) {
            e.preventDefault();
        });
});

$("#countaccmp").change(function () {
    var selVal = $(this).val();
    $("#textboxDiv").html('');
    if (selVal > 0) {
        for (var i = 1; i <= selVal; i++) {
            var input = ''
                + '<div class="form-group">'
                + '    <label class="col-xs-3 control-label" for="accmp' + i + '">Accmp ' + i + '</label>'
                + '    <div class="col-xs-5">'
                + '        <input type="text" name="accmp' + i + '" id = "accmp'+i+'" class = "form-control " / >'
                + '    </div>'
                + '</div>';
            $("#textboxDiv").append(input);
            $('#defaultForm').formValidation('addField', 'accmp' + i, {
                validators: {
                    // Here, add your field validators.
                    notEmpty: {}
                }
            });
        }
    }
});