Custom Reactive Library

document.addEventListener('portal-ready', function() {
    _pd.form_invalid = null; // Must be FALSE for form to submit, TRUE to show form validation messages

    // Init form fields
    _pd.was_referred = false; // Hides the referral email field

    // Form errors
    _pd.name_error = '';
    _pd.surname_error = '';
    _pd.email_error = '';
    _pd.cellphone_error = '';
    _pd.was_referred_error = '';
    _pd.referral_email_error = '';
    _pd.accept_ts_and_cs_error = '';

    let models = []; // A list of inputs that we're tracking to show custom error messages

    // Make a list of the models we'll be tracking
    // This makes it easy for when we add or remove inputs with two-way bindings
    $('#example-basic-form :input[data-model]').each((index, target) => {
        let elm = $(target);
        let model = elm.data('model');

        if (model.length > 0 && typeof models[model] === 'undefined') {
            models.push(model);
        }
    });

    /**
     * Validates form fields and shows error messages if necessary
     * 
     * @param array models  Array of model names to validate
     * 
     * @return bool
     */
    function validateFormFields(models) {
        let form = $('#example-basic-form');
        let local_models = [...models];
        let input;
        let error;
        let model;

        // Email and cellphone must always be validated together
        if (local_models.length === 1 && (local_models.indexOf('email') === 0 || local_models.indexOf('cellphone') === 0)) {
            local_models = ['email', 'cellphone'];
        }

        for (let i = 0; i < local_models.length; i++) {
            model = local_models[i];
            input = form.find(`:input[data-model="${model}"]`);

            input[0].checkValidity();
            error = input[0].validationMessage;

            // Email is required without cell phone
            if (model === 'email' && ! _pd.email && ! _pd.cellphone) {
                error = 'Required without cell phone.';
            }

            // Cell phone is required without email and has a specific format
            if (model === 'cellphone') {
                let regex = /^(\+27|0)[1-9]{2}[0-9]{7}$/;

                if (! _pd.cellphone) {
                    if (! _pd.email) {
                        error = 'Required without email.'; // Required without email
                    }
                } else if (! regex.test(_pd.cellphone)) {
                    error = 'Please provide a valid South African cell phone number.'; // Wrong format
                }
            }

            _pd[`${model}_error`] = error;
        }

        // Show error messages
        form_is_valid = form[0].checkValidity(); // Validates entire form, but shows no messages by itself
        _pd.form_invalid = ! form_is_valid;
        
        return form_is_valid;
    }

    // Listen for changes to models and show error messages if necessary
    models.forEach((model) => {
        $(document).on(`_pd.${model}.processed`, (event) => {
            if (! event.prop) {
                return;
            }

            validateFormFields([event.prop]); // Will validate only this field
        });
    });

    // Validate the form before submitting
    $('#example-basic-form').submit((event) => {
        // Clear the referral email address if it isn't required
        if (! _pd.was_referred) {
            _pd.referral_email = '';
        }

        let valid = validateFormFields(models); // Will validate all fields

        if (valid === true) {
            models.forEach((model) => { _pd[model] = ''; }); // Reset form
            _pd.was_referred = false; // Hides the referral email field
            alert('Form submitted...');
        }

        return false; // We're not really submitting anything for the demo
    });
});