Validate that time ranges are not overlapping

by hibbard_eu

HTML

<form>
    <div class="row">
        <fieldset>
            <legend>Time woked</legend>
            <label>Start:</label>
            <select class="start-hour">
                <option value="00">00</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
            </select>
            <select class="start-minute">
                <option value="00">00</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option...

CSS

select {
    background: #ccc;
    padding: 3px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
}
.add, .add a {
    color: green;
    text-decoration: none;
}
.remove, .remove a {
    color: red;
    text-decoration: none;
}
#controls-row {
    padding-top:10px;
}
span {
    padding-right: 15px;
}
.hidden {
    display: none;
}
div {
    margin-bottom:15px;
}
.error{
    border: 3px solid red;
}

JavaScript

function getTimeSelects(containingElement) {
    var selects = {};
    selects.startHour = containingElement.find(".start-hour");
    selects.startMinute = containingElement.find(".start-minute");
    selects.finishHour = containingElement.find(".finish-hour");
    selects.finishMinute = containingElement.find(".finish-minute");

    return selects;
}

function getTimeSelectsValuesInMinutes(containingElement) {
    var selects = getTimeSelects(containingElement);

    return [
    selects.startHour.val() * 60 + Number(selects.startMinute.val()),
    selects.finishHour.val() * 60 + Number(selects.finishMinute.val())];
}

function is_overlapping (x1,x2,y1,y2){
    return x1 < y2 && y1 < x2;
}

function checkForIntersection(arr){
    var overlappingElements = [];
    
    for(var i=0; i < arr.length; i++){
        for(var j=0; j < arr.length; j++){
            if (arr[i] !== arr[j] && 
                is_overlapping(arr[i][1], arr[i][2], arr[j][1], arr[j][2])){
                
                overlappingElements.push(arr[i][0]);
            }
        }
    } 
    return(overlappingElements);
}

$("#addBreak").on("click", function (e) {
    e.preventDefault();
    template.clone().insertBefore("#controls-row");
    $(".remove").show();
});

$("#removeBreak").on("click", function (e) {
    e.preventDefault();
    $("form").find(".breakRow").last().remove();
    if (!$("form").find(".breakRow").length) {
        $(".remove").hide();
    }
});

$("button").on("click", function (e) {
    e.preventDefault();
    var breakTimes = [],
        errorsPresent = false;
    
    $(".breakRow").each(function () {
        var minutes = getTimeSelectsValuesInMinutes($(this));
        minutes.unshift(this);
        breakTimes.push(minutes);
    });

    $.each(checkForIntersection(breakTimes), function(index, row){
      $(row).find("select").addClass("error");
      errorsPresent = true;
    });        
    
    if(errorsPresent){
        alert("Overlapping fields detected!");
   ...