（课程预订功能）提示用户在单击“在HTML表单上提交”之前选择了周末日期

Question

Intro to the Problem

I am currently developing a Booking Function, Members are able to purchase class packages of two different types, the first being a "Weekday Only" package whilst the other package allows for "All-Days".

I do not want to disable the selection of Weekends and Public Holidays for "Weekday Only" Package holders as they would still need to be able to book these dates albeit with additional costs.

Was wondering if there is any way to inform a "Weekday Only" Package holder that they have selected a Weekend/Public Holiday before they click submit on the HTML form.

The current method

On the Member's Home page they would be able to click the "Book a Class" button as long as their current account has an active package, Saving package information in the mysql as states of '0 = No Package' , '1 = Weekday Only Package' and '2 = Any-Day Package'.

Upon clicking the "Book a Class" button they are redirected to a form that allows the user to select a Date and a Class Slot. Upon submitting the form the day is checked based on the submitted date, If the Member package is state = '1' and the date selected falls on Saturday/Sunday it would prompt the member about the additional costs, before allowing the member to confirm the booking.

The current method is only able to check the date after the submit button has been hit, and the form submitted,

Thank you for your time and input.

Answer 1

In Javascript, you can add an event listener that will fire a handler function that validates the date to determine if it's on a weekend or not every time the input changes.

In the aforementioned function, you can check if it's the weekend using the getDay() method to validate, something like the code/pseudocode below could be a good start:

let yourDateField = document.getElementByID("you-date-field");

yourDateField.addEventListener('input', function (evt) {

    let selectedDate = new Date(yourDateField.value);

    let day = selectedDate.getDay();

    if(day === 6){

      alert("The date you chose is on a Saturday");

    }
    else if(day === 0){

      alert("The date you chose is on a Sunday");

    }else{

      //Proceed with class signup.

    }

});

The answer assumes that you don't need to check the database before making the validation.