Need help for JS logic

Need help for JS logic
0.0 0

#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


#2

If you could post your entire code with html, css, and the js code, it would be better. We could look for mistakes in the html (if there are any) that could be causing the problem.


#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.


#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.