Nieuwe rij toevoegen verplichte velden

Je moet er voor zorgen dat de events pas koppelt (of wederom koppelt) als de nieuwe formuliervelden zijn toegevoegd.

http://codepen.io/anon/pen/FdDIb?editors=101

Hieronder mijn javascript hoe ik het nu heb.

<script type="text/javascript">
    $(document).on('focus', '.datepicker1', function(e) {
        $(this).datepicker({
            minDate: new Date(),
            dateFormat: "dd-mm-yy",
            prevText : '<i class="fa fa-chevron-left"></i>',
            nextText : '<i class="fa fa-chevron-right"></i>'
        });

        e.preventDefault();
    });

    $(document).on('focus', '.timepicker', function(e) {
        $(this).timepicker({
            defaultTime: false,
            showMeridian: false
        });

        e.preventDefault();
    });

    $(document).on('focus', '.naam', function(e) {
        $(this).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "/naam.json",
                    dataType: "jsonp",
                    data: {
                        q: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            minLength: 3
        });

    });

    $(document).on('click', '.btn-add', function(e) {
        e.preventDefault();

        var controlForm = $('form:first fieldset.qqq'),
            currentEntry = $(this).parents('.entry:first'),
            rowId = $(currentEntry).data('row-id'),
            newEntry = $(currentEntry).clone();

        $(newEntry).appendTo(controlForm);

        $('.datepicker1').removeAttr('id').removeClass('hasDatepicker');

        newEntry.find('input').not('.datepicker1').val('');

        controlForm.find('.entry:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<span class="glyphicon glyphicon-minus"></span>');

    }).on('click', '.btn-remove', function(e) {
        $(this).parents('.entry:first').remove();

        e.preventDefault();
        return false;
    });

    $(document).ready(function() {

        $('#form').validate({
            rules : {
                'datum[]' : {
                    required : true
                },
                'tijd[]' : {
                    required : true
                },
                'naam[]' : {
                    required : true
                }
            },
            errorPlacement : function(error, element) {
                error.insertAfter(element.parent());
            }
        });
    });
</script>

http://codepen.io/anon/pen/FdDIb?editors=101

Hoop dat dit voorbeeld het enigszins verduidelijkt


Toevoeging op 15/10/2014 00:01:11:

Mag er ook de broodnodige HTML bij of zet het ook even in codepen.

Toevoeging op 15/10/2014 00:09:57:

dit:

        $('#form').validate({
            rules : {
                'datum[]' : {
                    required : true
                },
                'tijd[]' : {
                    required : true
                },
                'naam[]' : {
                    required : true
                }
            },
            errorPlacement : function(error, element) {
                error.insertAfter(element.parent());
            }
        });

moet je waarschijnlijk opnieuw aanroepen als een regel hebt toegevoegd aan het formulier.

Het makkelijkste is om deze code in een aparte functie te zetten en de nieuwe functie dan vanaf $(document).ready aanroepen en telkens direct nadat je een nieuwe regel hebt toegevoegd.

Toevoeging op 15/10/2014 00:13:43:

fucntion initValidation()
{
        $('#form').validate({
            rules : {
                'datum[]' : {
                    required : true
                },
                'tijd[]' : {
                    required : true
                },
                'naam[]' : {
                    required : true
                }
            },
            errorPlacement : function(error, element) {
                error.insertAfter(element.parent());
            }
        });
}

$(document).ready(function() {
	initValidation();
});

en dan na:

(newEntry).appendTo(controlForm);

dit:

initValidation();

Heb het geprobeerd maar is mij nog niet gelukt.

Kan je de code misschien op JSfiddle met ons delen? Dan kunnen we makkelijk even kijken wat er aan de hand is.

Wat heb je allemaal nodig het javascript heb ik hier boven neer gezet.

Hieronder wat html

<fieldset class="qqq">
	<div class="row entry">
		<section class="col col-2">
			<label class="input">
				<i class="icon-append fa fa-calendar"></i>
				<input type="text" name="datum[]" class="datepicker1">
			</label>
		</section>
		<section class="col col-2">
			<label class="input">
				<i class="icon-append fa fa-clock-o"></i>
				<input type="text" name="tijd[]" class="timepicker">
			</label>
		</section>
		<section class="col col-3">
			<label class="input">
				<input type="text" name="naam[]" class="naam">
			</label>
		</section>
		<section class="col col-4">
			<label class="input">
				<input type="text" name="opmerking[]">
			</label>
		</section>
		<section class="col col-1">
			<a href="#" class="btn btn-success btn-sm btn-add">
				<span class="glyphicon glyphicon-plus"></span>
			</a>
		</section>
	</div>
</fieldset>

Toevoeging op 15/10/2014 20:17:57:

Ik ben er net achtergekomen dat de velden in de eerste rij alleen rood worden gemaakt en als ik in een ander veld ga staan en daar weer uit ga wordt die ook rood.