invisio v2.0

new JustValidate('.fcf-form-class', {
    rules: {
        "Event": {
            "required": true,
            "minLength": 1,
            "maxLength": 200
        },
        "Date": {
            "required": true,
            "minLength": 1,
            "maxLength": 100
        },
        "Name": {
            "required": true,
            "minLength": 1,
            "maxLength": 100
        },
        "Email": {
            "required": true,
            "minLength": 1,
            "maxLength": 100,
            "email": true
        },
        "Address": {
            "required": true,
            "minLength": 1,
            "maxLength": 255
        },
        "Postcode": {
            "required": true,
            "minLength": 1,
            "maxLength": 100
        },
        "City": {
            "required": true,
            "minLength": 1,
            "maxLength": 100
        },
        "Country": {
            "required": true,
            "minLength": 1,
            "maxLength": 100
        },
        "Phone": {
            "required": true,
            "minLength": 1,
            "maxLength": 100
        }
		,
        "Message": {
            "required": true,
            "minLength": 1,
            "maxLength": 3000
        }
    },
    colorWrong: '#dc3545',
    focusWrongField: true,
    submitHandler: function (cform, values, ajax) {

var button_value = getButtonValue('fcf-button');
        disableButton('fcf-button');
        ajax({
            url: cform.getAttribute('action'),
            method: 'POST',
            data: values,
            async: true,
            callback: function (response) {
                var done = false;
                if (response.indexOf('Fail:') == 0) {
                    // configration problem
                    showFailMessage(response);
                    enableButon('fcf-button', button_value);
                    done = true;
                }

if (response.indexOf('Error:') == 0) {
                    // validation problem
                    showErrorMessage(response);
                    enableButon('fcf-button', button_value);
                    done = true;
                }

if (response.indexOf('Success') == 0) {
                    showSuccessMessage(response);
                    done = true;
                }

if (response.indexOf('Debug:') == 0) {
                    showDebugMessage(response);
                    enableButon('fcf-button', button_value);
                    done = true;
                }

if (done == false) {
                    showErrorMessage('Error:Sorry, an unexpected error occurred. Please try later.');
                    enableButon('fcf-button', button_value);
                }

}
        });

},
});

function getButtonValue(id) {
    return document.getElementById(id).innerText;
}

function disableButton(id) {
    document.getElementById(id).innerText = 'Please wait...';
    document.getElementById(id).disabled = true;
}

function enableButon(id, val) {
    document.getElementById(id).innerText = val;
    document.getElementById(id).disabled = false;
}

function showFailMessage(message) {
 var display = 'Unexpected errors. (form has been misconfigured) ';
 display += message.substring(5);
 document.getElementById('fcf-status').innerHTML = display;
}

function showErrorMessage(message) {
 var display = 'Validation problem: ';
 display += message.substring(6);
 document.getElementById('fcf-status').innerHTML = display;
}

function showDebugMessage(message) {
 var display = 'Debug details. (Please remember to switch off DEBUG mode when done!) ';
 display += message.substring(6);
 document.getElementById('fcf-status').innerHTML = display;
}

// Removing this credit is NOT allowed
// Please purchase a pro license for credit removal rights
var creditcontainer = document.querySelector(".buttons");
var creditdiv = document.createElement('div');
creditdiv.innerHTML = '';
creditcontainer.parentNode.insertAdjacentElement('afterend', creditdiv);

function showSuccessMessage(message) {
 var message = ' ' + message.substring(8);
 var content = document.getElementById('fcf-thank-you_1').innerHTML;
 document.getElementById('fcf-thank-you_1').innerHTML = content + message;
 document.getElementById('fcf-status').innerHTML = '';
 document.getElementById('fcf-form').style.display = 'none';
 document.getElementById('fcf-thank-you_1').style.display = 'block';
}