Živá ukázka

Výsledek

<form action="#" method="post" id="prihlaska">
            <div class="form-group">
                <label for="jmeno" class="sr-only">Jméno</label>
                <input type="text" class="form-control" id="jmeno" name="jmeno" placeholder="Jméno">
            </div>
            <div class="form-group">
                <label for="prijmeni" class="sr-only">Příjmení</label>
                <input type="text" class="form-control" id="prijmeni" name="prijmeni" placeholder="Příjmení">
            </div>
            <div class="form-group">
                <label for="email" class="sr-only">Email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="telefon" class="sr-only">Telefon</label>
                <input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon">
            </div>
            <h5>Počet lístků</h5>
            <div class="form-group">
                <label for="listky" class="sr-only">Počet lístků</label>
                <select type="text" class="form-control-select" id="listku" name="listku" placeholder="Počet lístků">
                
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
            <div id="jmena">

</div>
            <input type="submit" name="submit" class="btn btn-read-more" value="Závazně registrovat" style="width: 100%;" />
            <div class="clearfix"></div>
        </form>
        <script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

$(document).ready(function () {

$('#prihlaska').validate({ // initialize the plugin
                rules: {
                    jmeno: {
                        required: true
                    },
                    prijmeni: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    jmeno: {
                        required: "Vyplňte vaše jméno."
                    },
                    prijmeni: {
                        required: "Vyplňte vaše příjmení."
                    },
                    email: {
                        required: "Vyplňte vaši emailovou adresu.",
                        email: "Zadejte platnou emailovou adresu."
                    },
                    jmeno_ucastnik: {
                        required: "Vyplňte jméno účastníka.",
                    }
                }
                
            });

});
        
 $("select[name=listku]").change(function() {
    var pocetInputu = $("#jmena input").length;
    var pozadovanyPocet = $(this).val()-1;
    rozdil = pozadovanyPocet - pocetInputu;
    if(rozdil > 0)
    {
        for (var i = 0; i < rozdil; i++) {
        $("#jmena").append('<div class="form-group">' +
                            '<label for="jmeno" class="sr-only">Jméno účastníka</label>' +
                            '<input type="text" class="form-control"  name="jmeno_ucastnik[]" placeholder="Jméno účastníka">' +
                           '</div>');
        }
    }
    else
    {
        $("#jmena input").slice(pozadovanyPocet).remove();
    }
})

JS

Autoformát
jQuery
Umístění JS