<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
$('#InsertRecordDeparture_Date, #InsertRecordReturn_Date').unbind();
$('#InsertRecordDeparture_Date, #InsertRecordReturn_Date').attr('autocomplete', 'off');
init_datepicker();

// Disables numeric keys for inserting date manually
$('#InsertRecordDeparture_Date, #InsertRecordReturn_Date').keypress(function(event){
event.preventDefault();
});
// refresh datepicker
$('#InsertRecordDeparture_Date, #InsertRecordReturn_Date').keyup(function(event){
console.log(2);
init_datepicker();
});
});
function init_datepicker() {
let departureDate = $("*[name=InsertRecordDeparture_Date]");
let returnDate = $("*[name=InsertRecordReturn_Date]");
$('.hasDatepicker').removeClass('hasDatepicker');
$('*[name=InsertRecordDeparture_Date], *[name=InsertRecordReturn_Date]').datepicker('destroy');
departureDate.datepicker({
onSelect: function(date){
returnDate.datepicker( "option", "minDate", date);
}
});

returnDate.datepicker({
onSelect: function(date){
departureDate.datepicker( "option", "maxDate", date);
}
});

if( departureDate.val() > '' ) {
returnDate.datepicker( "option", "minDate", departureDate.val());

}

if( returnDate.val() > '' ) {
departureDate.datepicker( "option", "maxDate", returnDate.val());

}

// remove additional datepicker on datapage reload
$('.ui-datepicker').each(function(i){
if (i != 0) {
$(this).remove();
}
});
}


function initCaspioFormValidate(formAppKey, initializer, justValidateConfig = null) {
// Make sure the JustValidate is loaded
if (typeof window.JustValidate !== 'function') {


console.error('JustValidate is not detected. Unable to initialize validator.');
return false;
}

let validator = null; // Validator instance
let formIsValid = false; // Flag to check if the form is already validated.

// Use DataPage ready to make sure the form inputs will be detected.
document.addEventListener('DataPageReady', function (event) {
if (event.detail.appKey.includes(formAppKey)) {
if (document.querySelector(`form[action*="${formAppKey}"] section[data-cb-name="cbTable"]`) == null) {
// Skip when the form is submitted and the inputs are no longer available.
console.log('Form is no longer available. Skipping validation initialization');
return false;
}

validator = new window.JustValidate(`form[action*="${formAppKey}"]`, justValidateConfig);

initializer(validator);
}
});

// Intercept Caspio form submission so we can validate it first.
document.addEventListener('BeforeFormSubmit', function(event) {
// A in AppKey is capitalized in BeforeFormSubmit event
if (event.detail.AppKey.includes(formAppKey)) {
if (!formIsValid) {

event.preventDefault(); // Stop form submission

validator.revalidate().then(isValid => {
formIsValid = isValid; // Update flag so next submit won't validate.

if (formIsValid) {
// Try to submit again
document.querySelector(`form[action*="${formAppKey}"] input[type="submit"]`).click();
}
});
}
}
});

document.addEventListener('FormSubmitted', function(event) {
// A in AppKey is capitalized in FormSubmitted event
if (event.detail.AppKey.includes(formAppKey)) {
formIsValid = false; // Update flag to enable validation again
}
});
}

initCaspioFormValidate(
'[@cbAppKey]',
function(validator) {
validator
.addField('#InsertRecordFull_Name', [
{
rule: 'required',
errorMessage: '! Full Name is required',
}

])
.addField('#InsertRecordEmail', [
{
rule: 'required',
errorMessage: '! Email is required',
}
])
.addField('#InsertRecordDeparture_Date', [
{
rule: 'required',
errorMessage: '! Departure Date is required',
}
])
.addField('#InsertRecordReturn_Date', [
{
rule: 'required',
errorMessage: '! Return Date is required',
}
])
.onFail((fields) => {
console.log('failed fields: ', fields)
});
}
);

</script>