Error validation velo code javascript - first time beginner question

[Sabrina_M]

Question:
Hi,
I have created a form on my website which retrieves user input into the wix database collection.
The form works well, except, now, I would like to add additional error validations.
The form collects the following

• deadline application date (date, dd/mm/yyyy)
• start date (date, dd/mm/yyyy)
• end date (date, dd/mm/yyyy)

I only know how to read a tiny bit of code but not write at all. So if someone could show me the code including beginning and end would be great to understand context!

I want to know how to achieve the following correctly please?

1. when the user fills in the “Deadline Application Date”, the date cannot be in the past and the date must be at least 1 week from today’s date.
2. when the user fills in the “Start Date”, the date cannot be in the past, the date must be at least 24 hours after the “Deadline Application Date”.
3. when the user fills in the “End Date”, the date cannot be in the past, the date must be at least 24 hours after the “Start Date”.

4)How to have the code play out live anytime the input is changed? rather than on clicking the submit button?

Product:
[Which editor or feature is your question most relevant to? e.g. Wix Editor, Wix Studio Editor, Editor X.]

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]

What have you already tried:
I tried out the code below but no results when I preview

// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction

$w.onReady(function ()

    {});

/**
*	Adds an event handler that runs when an input element's value
 is changed.
	[Read more](https://www.wix.com/corvid/reference/$w.ValueMixin.html#onChange)
*	 @param {$w.Event} event
*/
export function deadlineApplicationDate_change(event) {

    var deadlineDate = new Date(FormData.call($w('#deadlineApplicationDate')).value);
    var startDate = new Date(FormData.call($w('#startDate')).value);
    var endDate = new Date(FormData.call($w('#endDate')).value);

    // Validate Deadline Application Date
    var today = new Date();
    var oneWeekFromToday = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);

    $w('#deadlineApplicationDate').onCustomValidation((value, reject) => {
                if (deadlineDate < today || deadlineDate < oneWeekFromToday) {
                    reject('Deadline must be in the future and at least 1 week from today.');
                    $w('#textRejectDeadlineDt').text = 'Deadline must be in the future and at least 1 week from today.';
                    $w('#textRejectDeadlineDt').show();
                } else {
                    $w('#textrejectstartdt').hide();
                }
                return;
            }

            // Validate Start Date
            var minStartDate = new Date(deadlineDate.getTime() + 24 * 60 * 60 * 1000); $w('#startDate').onCustomValidation((value, reject) => {
                    if (startDate < minStartDate || startDate < today) {
                        reject('Start date must be at least 24 hours after the deadline and in the future.');
                        $w('#textrejectstartdt').text = 'Start date must be at least 24 hours after the deadline and in the future.';
                        $w('#textrejectstartdt').show();
                    } else {
                        $w('#textrejectstartdt').hide();
                    }
                    return;
                }

                // Validate End Date
                var minEndDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); $w('#endDate').onCustomValidation((value, reject) => {
                    if (endDate < minEndDate || endDate < today) {
                        reject('End date must be at least 24 hours after the start date and in the future.');
                        $w('#textRejectEndDt').text = 'End date must be at least 24 hours after the start date and in the future.';
                        $w('#textRejectEndDt').show();
                    } else {
                        $w('#textRejectEndDt').hide();
                    }
                    return;
                });
                // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
                // Add your code for this event here: 

Additional information:
I made sure the error validation texts in red are hidden by default, and i’ve tested without it being hidden on default, neither made a difference.

Thank you in advance for any guidance!

[anthony]

Some of these (such as not allowing past dates) can be done without code in the editor under Settings > Calendar.

I don’t know if all of your code issues are caused by this but FormData.call() seems to be superfluous/not something Wix does so you might want to try changing those 3 lines to:

    var deadlineDate = new Date($w('#deadlineApplicationDate').value);
    var startDate = new Date($w('#startDate').value);
    var endDate = new Date($w('#endDate').value);

I don’t even think the values need to be cast to a Date (should already be one), so this should work as well:

    var deadlineDate = $w('#deadlineApplicationDate').value;
    var startDate = $w('#startDate').value;
    var endDate = $w('#endDate').value;

However this isn’t the full story as this code is currently doing frontend validation rather than backend validation. Frontend validation by itself isn’t secure and this needs to be done on the backend as well. I can’t tell from the code provided whether or not this site is also doing backend validation.

This however goes beyond the simple help provided in this section and if you need more involved collaboration I’d recommend checking out Collaboration or https://www.wix.com/marketplace/

[Sabrina_M]

Thank you Anthony!
thought it was going to be harder, but for the front end yes just that bit of cleaning helped!