Need help for JS logic

1

Hi. I tried to solve a problem since last 4 days and get mad because of this looks like never solved, bugs coming day by day. Can anyone help me to solve this JS , please.

Information: Event date must be future date and it is mandatory. Other hand Event end date is non-mandatory , can put same date on Event date .

Error 1: I am having few issues in my code: when I put event date - 02-02-2017, end event end date 03-03-2017 this both should be invalidate (it works ) but when I change back Event Date to 02-02-2018 and leave Event date as previous value -> error appear in both field. which is wrong.

Error 2 : when I put event date - 02-02-2017, end event date 03-03-2017 this both should invalidate (it works ) but when I change back Event End Date to 02-02-2018 and leave Event date as previous value -> Both removes the errors. But Correct solution error needs to comeup in Event Date.

Error 3: After Step 2 , change End date to empty (error removes in End date , which is correct) but Error in Event Date not removing.

This is JS date validation.

Code as below;

//Event date validation starts here
var validEventDate = true;

$('#Date, #Month, #EventYear').on('change', function() {
if (validateEventDate()) {
    if ($('#DateEnd').val() === "" && $('#MonthEnd').val() === '' && $('#EventYearEnd').val() === '') {
        handleErrorMessage(true)
        validEventDate = true
        console.log("error2-1")
    } else {
        var startDate1 = new Date($('#EventYear').val() + '-' + $('#Month').val() + '-' + $('#Date').val())
        var endDate1 = new Date($('#EventYearEnd').val() + '-' + $('#MonthEnd').val() + '-' + $('#DateEnd').val())
        if (endDate1 >= startDate1) {
            handleErrorMessage(true)
            validEventDate = true;
            console.log("error2-2")
        } else {
            validEventDate = false;
            handleErrorMessageLessthan(false);
            console.log("error2-3")
        }
        handleErrorMessageEnd(true)
        validEventDateEnd = true;
        console.log("special-error1")
    }
} else {
    handleErrorMessage(false)
    validEventDate = false 
    console.log("error2-4")
}
})

$('.js-macmillan-event').on('submit', function(e) {
if (!validateEventDate()) {
    e.preventDefault()
    handleErrorMessage(false)
    validEventDate = false;
} else {
    this.submit
    handleErrorMessage(true)
    validEventDate = true;
}
})

function handleErrorMessage(op) {
if (!op) {
    $('#EventDate').addClass('error-handler')
    $('#EventDate').find('.error-message').find('.error-text p').html('Please enter a valid event date.')
} else {
    $('#EventDate').removeClass('error-handler')
    $('#EventDate').find('.error-message').find('.error-text p').html('')
}
}
function handleErrorMessageLessthan(op) {
if (!op) {
    $('#EventDate').addClass('error-handler')
    $('#EventDate').find('.error-message').find('.error-text p').html('Please enter a valid event date less than event end date.')
} else {
    $('#EventDate').removeClass('error-handler')
    $('#EventDate').find('.error-message').find('.error-text p').html('')
}
}

function validateEventDate() {
var $day = $('select[id="Date"] option:selected'),
    $month = $('select[id="Month"] option:selected'),
    $year = $('input[id="EventYear"]'),
    dayStr = $day.text(),
    monthStr = $month.text(),
    yearStr = $year.val(),
    dayIndex = $day.index(),
    monthIndex = $month.index(),
    yearIndex = yearStr;

if (dayIndex > 0 || monthIndex > 0 || yearIndex > 0) {
    if (dayIndex > 0 && monthIndex > 0 && yearIndex > 0) {

        if (dayIndex > 29 && monthIndex == 2) {
            return false
        }

        if ((dayIndex > 30) && (monthIndex == 4 || monthIndex == 6 || monthIndex == 9 || monthIndex == 11)) {
            return false
        }

        eventDate = new Date(yearStr + '/' + monthStr + '/' + dayStr);
        nowDate = new Date();

        if (isNaN(eventDate)) {
            return false;
        } else {
            if (eventDate < nowDate) {
                return false;
            } else {
                return true
            }
        }

    } else {
        return false;
    }
} else {
    return false;
}
}
//Event date validation ends here

//Event End date validation starts here
var validEventDateEnd = true;

$('#DateEnd, #MonthEnd, #EventYearEnd').on('change', function() {

if (validateEventDateEnd()) {
    if ($('#Date').val() === "" && $('#Month').val() === '' && $('#EventYear').val() === '') {
        handleErrorMessage(false)
        validEventDate = false;
    } else {
        var startDate = new Date($('#EventYear').val() + '-' + $('#Month').val() + '-' + $('#Date').val())
        var endDate = new Date($('#EventYearEnd').val() + '-' + $('#MonthEnd').val() + '-' + $('#DateEnd').val())
        console.log("error1")
        if (endDate >= startDate) {
            handleErrorMessageEnd(true)
            validEventDateEnd = true;
            console.log("error2")
        } else {
            handleErrorMessageEnd(false)
            validEventDateEnd = false;
            // handleErrorMessage(true)
            // validEventDate = true;
            //console.log("error3")
            console.log("special-error2")
        }
        handleErrorMessage(true)
        validEventDate = true;
        console.log("error3")
    }
} else {
    if ($('#DateEnd').val() === "" && $('#MonthEnd').val() === '' && $('#EventYearEnd').val() === '') {
        handleErrorMessageEnd(true)
        validEventDateEnd = true;
    } else {
        handleErrorMessageEnd(false)
        validEventDateEnd = false;
    }
    // handleErrorMessageEnd(false)
    // validEventDateEnd = false 
    // console.log("error4")
}
})

function handleErrorMessageEnd(op) {
if (!op) {
    $('#EventDateEnd').addClass('error-handler')
    $('#EventDateEnd').find('.error-message').find('.error-text p').html('Please enter a valid event end date greater or same than the event date.')
} else {
    $('#EventDateEnd').removeClass('error-handler')
    $('#EventDateEnd').find('.error-message').find('.error-text p').html('')
}
}

function validateEventDateEnd() {
var $day = $('select[id="DateEnd"] option:selected'),
    $month = $('select[id="MonthEnd"] option:selected'),
    $year = $('input[id="EventYearEnd"]'),
    dayStr = $day.text(),
    monthStr = $month.text(),
    yearStr = $year.val(),
    dayIndex = $day.index(),
    monthIndex = $month.index(),
    yearIndex = yearStr;

if (dayIndex > 0 || monthIndex > 0 || yearIndex > 0) {
    if (dayIndex > 0 && monthIndex > 0 && yearIndex > 0) {

        if (dayIndex > 29 && monthIndex == 2) {
            return false
        }

        if ((dayIndex > 30) && (monthIndex == 4 || monthIndex == 6 || monthIndex == 9 || monthIndex == 11)) {
            return false
        }

        eventDate = new Date(yearStr + '/' + monthStr + '/' + dayStr);
        nowDate = new Date();

        if (isNaN(eventDate)) {
            return false;
        } else {
            if (eventDate < nowDate) {
                return false;
            } else {
                return true
            }
        }

    } else {
        return false;
    }
} else {
    return false;
}
}
//Event End date validation ends here

Please help me to solve this crazy code. Thank you

3

Hi @rmdawson71 , I just added all coding to code pen. https://codepen.io/fdshenika/pen/YQJydq
Thanks for looking at this.

4

@rmdawson71, let me know if you don’t understand 3 errors I have been facing so far,
Thank you.

5

Since I saw you were getting error 2-4 in the console, I added more console logs at every point it returns false to track down the error. I would start investigating the problem there.

saved.png1674×803 51.9 KB

6

Thanks for your suggestion, let me try to track down it again

7

@Dasaru,
Thanks for your suggestion, let me try to track down it again .

8

@Dasaru, just went through few steps But I don’t think according to your image ‘eventDate < nowDate’ is should be false > this only checks the date am picking from the flat html is a future date or not.I think my on change events bit more complicated as it has so many cases.