On my form when a user clicks on a button a new input field will be added. I need to validate in when user presses submit button without filling the date. (Its a datepicker ). Am not sure whats wrong,
Here is my code:
var room = 0;
function room_fields() {
room++;
var objTo = document.getElementById('room_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "row removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="col-5 form-group"><div class="form-control-wrap"><div class="form-icon form-icon-left"><em class="icon ni ni-calendar"></em></div><input type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd" placeholder="Select Intake date" name="selected_intakes" id="selected_intakes_'+room+'"></div></div><div class="col-2 form-group"><input type="button" class="btn btn-danger" value="-" onclick="remove_education_fields('+ room +');"></div>';
objTo.appendChild(divtest)
setTimeout(function(){
$("#selected_intakes_"+room).datepicker();
$("#selected_dates_"+room).datepicker();
$('#selected_dates_'+room).rules('add', {
required: true,
});
}, 50);
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
My input:
<input type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd" name="selected_dates" id="selected_dates_{{counter}}">
<input type="button" class="btn btn-primary" value="+" onclick="room_fields();">
So from the above, when user press button, room_fields
is called and new field is added. And i am adding rules also. But sadly my form is not getting validated.
And note: I cant use dynamic names, instead am using dynamic id's
Please help