Nieuwe rij toevoegen verplichte velden
Ik heb met een php applicatie bezig.
Nu heb ik een rij met input velden die ze moeten invullen en met + kunnen ze een nieuwe rij toevoegen, alleen krijg het niet voor elkaar dat die ook verplicht worden.
Ik maak gebruik van jQuery Validation voor het verplicht maken van de velden aan de cliënt kant.
http://codepen.io/anon/pen/FdDIb?editors=101
Gewijzigd op 14/10/2014 23:59:47 door Frank Nietbelangrijk
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<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>
$(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>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#form').validate({
rules : {
'datum[]' : {
required : true
},
'tijd[]' : {
required : true
},
'naam[]' : {
required : true
}
},
errorPlacement : function(error, element) {
error.insertAfter(element.parent());
}
});
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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();
});
{
$('#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:
Code (php)
1
(newEntry).appendTo(controlForm);
dit:
Code (php)
1
initValidation();
Hieronder wat html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>
<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.