I have made a JSFIDDLE link for reference here. The validation for start and end time starts on the click of the 'Next' button, which is on the same page. I want to validate the start and end time for dynamically created fields as -> Start time should be smaller than the end time. I have created an array and then checked for time using the if loops. I have pasted the code below here. But the validation fails when the start time selected is 8:30am and end time as 10.00am. I am not able to understand why this is happening. Please help.
<td data-name="sub_event_stime[]" >
<input type="text" placeholder="Enter time" name="sub_event_stime[]" class="span11 timepicker sub_event_stime" style="background-color: #FFF;margin-top: 3%;height: 37px;width: 69%;text-align: center;">
<br/>
</td>
<td data-name="sub_event_etime[]" >
<input type="text" name="sub_event_etime[]" placeholder="Enter time" class="span11 timepicker sub_event_etime" style="background-color: #FFF;margin-top: 3%;height: 37px;width: 69%;text-align: center;">
<br/>
</td>
<td data-name="sub_event_venue[]" >
<input type="text" name='sub_event_venue[]'
placeholder='Venue' class="form-control sub_event_venue" style="text-
align:center;margin-left:16%;margin-top:10px;height: 29px;width:
68.4%;padding:17px; "/>
</td>
Jquery code
$('#next_button').click(function(e) {
var stime = [];
$.each($('.sub_event_stime'), function (i, item)
{
var val = $(this).val();
stime.push( val );
});
var etime = [];
$.each($('.sub_event_etime'), function (i, item)
{
var val = $(this).val();
etime.push( val );
});
var venue = [];
$.each($('.sub_event_venue'), function (i, item)
{
var val = $(this).val();
venue.push( val );
});
for(var i=0; i < venue.length; i++)
{
for(var j=i+1; j < venue.length; j++)
{
if(venue[i] == venue[j] && venue[i] != "" && venue[j] != "" && stime[i] == stime[j] && etime[i] != "" && etime[j] != "" && stime[i]!= '' )
{
console.log(venue);
console.log(stime);
console.log(etime);
$('.sub_event_stime').eq(j).val('');
$('.sub_event_etime').eq(j).val('');
$('.sub_event_venue').eq(j).val('');
alert("Same time and same venue not allowed");
$(this).attr('type','submit');
return false;
}
else if(stime[i] > etime[i] && stime[i] != '' && etime[i] !== '')
{
console.log(venue);
console.log(stime);
console.log(etime);
$('.sub_event_stime').eq(j).val('');
$('.sub_event_etime').eq(j).val('');
$('.sub_event_venue').eq(j).val('');
alert("Start time should be smaller than end time");
$(this).attr('type','submit');
return false;
}
else if((stime[i] == etime[i]) && (stime[j] == '' ) && (etime[j] == ''))
{
console.log(venue);
console.log(stime);
console.log(etime);
$('.sub_event_stime').eq(i).val('');
$('.sub_event_etime').eq(i).val('');
$('.sub_event_venue').eq(i).val('');
alert("Start time and end time cannot be same");
$(this).attr('type','submit');
return false;
}
else if((stime[j] == etime[j]) && (stime[i] == '') && (etime[i] == ''))
{
console.log(venue);
console.log(stime);
console.log(etime);
$('.sub_event_stime').eq(j).val('');
$('.sub_event_etime').eq(j).val('');
$('.sub_event_venue').eq(j).val('');
alert("Start time and end time cannot be same");
$(this).attr('type','submit');
return false;
}
else if(etime[j] < etime[i] && venue[i] == venue[j] && etime[j] != '' && etime[i] != '')
{
console.log(venue);
console.log(stime);
console.log(etime);
$('.sub_event_stime').eq(j).val('');
$('.sub_event_etime').eq(j).val('');
$('.sub_event_venue').eq(j).val('');
alert("This range has already been used");
$(this).attr('type','submit');
return false;
}
else if(stime[j] > stime[i] && venue[i] == venue[j] && stime[j] != '' && stime[i] != '')
{
console.log(venue);
console.log(stime);
console.log(etime);
$('.sub_event_stime').eq(j).val('');
$('.sub_event_etime').eq(j).val('');
$('.sub_event_venue').eq(j).val('');
alert("This range has already been used");
$(this).attr('type','submit');
return false;
}
}
}
});
your issue here:
(etime[j] < etime[i] && venue[i] == venue[j] && etime[j] != '' && etime[i] != '')
these are all strings. which should not be compared using < > operators.
out of w3schools
When comparing two strings, "2" will be greater than "12", because (alphabetically) 1 is less than 2.
An empty string converts to 0 while A non-numeric string converts to NaN which is always false.
To secure a proper result, variables should be converted to the proper type before comparison.