$('#cl-longContactFormConfig')
.formValidation({
autoFocus: false,
framework: 'bootstrap',
icon: {
valid: null,
invalid: null,
validating: null
},
fields: {
'values[longContactFormDefinition_title]': {
trigger: 'change',
validators: {
notEmpty: {
message: 'Please select a title',
message_en: 'Please select a title'
}
}
},
'values[longContactFormDefinition_firstName]': {
trigger: 'blur',
validators: {
notEmpty: {
message: 'Please enter your first name.',
message_en: 'Please enter your first name.'
},
stringLength: {
message: 'You have exceeded the maximum length of 40 characters for this field',
message_en: 'You have exceeded the maximum length of 40 characters for this field',
max: 40
},
}
},
'values[longContactFormDefinition_lastName]': {
trigger: 'blur',
validators: {
notEmpty: {
message: 'Please enter your last name.',
message_en: 'Please enter your last name.'
},
stringLength: {
message: 'You have exceeded the maximum length of 40 characters for this field',
message_en: 'You have exceeded the maximum length of 40 characters for this field',
max: 40
},
}
},
'values[longContactFormDefinition_email]': {
trigger: 'blur',
validators: {
regexp: {
regexp: "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$",
message: 'Please enter your email address.',
message_en: 'Please enter your email address.'
},
notEmpty: {
message: 'Please enter your email address.',
message_en: 'Please enter your email address.'
},
stringLength: {
message: 'The number of characters for this field must be between 0 and 70',
message_en: 'The number of characters for this field must be between 0 and 70',
min: 0
,
max: 70
},
}
},
'values[longContactFormDefinition_addressLine1]': {
trigger: 'blur',
validators: {
stringLength: {
message: 'You have exceeded the maximum length of 60 characters for this field',
message_en: 'You have exceeded the maximum length of 60 characters for this field',
max: 60
},
}
},
'values[longContactFormDefinition_addressLine2]': {
trigger: 'blur',
validators: {
stringLength: {
message: 'You have exceeded the maximum length of 40 characters for this field',
message_en: 'You have exceeded the maximum length of 40 characters for this field',
max: 40
},
}
},
'values[longContactFormDefinition_zip]': {
trigger: 'blur',
validators: {
stringLength: {
message: 'You have exceeded the maximum length of 10 characters for this field',
message_en: 'You have exceeded the maximum length of 10 characters for this field',
max: 10
},
}
},
'values[longContactFormDefinition_town]': {
trigger: 'blur',
validators: {
stringLength: {
message: 'You have exceeded the maximum length of 40 characters for this field',
message_en: 'You have exceeded the maximum length of 40 characters for this field',
max: 40
},
}
},
'values[longContactFormDefinition_country]': {
trigger: 'change',
validators: {
notEmpty: {
message: 'Please enter your country.',
message_en: 'Please enter your country.'
}
}
},
'values[longContactFormDefinition_phone]': {
trigger: 'blur',
validators: {
stringLength: {
message: 'You have exceeded the maximum length of 20 characters for this field',
message_en: 'You have exceeded the maximum length of 20 characters for this field',
},
callbackPhone: {
alias: 'callback',
message: 'Please enter your telephone number',
message_en: 'Please enter your telephone number',
callback: function (value, validator, $field) {
var matchesRegex = true;
var regexList = [];
for (var i = 0; i < regexList.length; i++) {
matchesRegex = matchesRegex && (value.match(regexList[i])[0] === value);
}
var prefixCountry = $field.siblings('.flag-container').children('.selected-flag').attr('title');
var isValidPrefix = prefixCountry !== undefined && prefixCountry !== "Unknown";
return value === '' || (matchesRegex && isValidPrefix);
}
},
}
},
'values[longContactFormDefinition_topic]': {
trigger: 'change',
validators: {
notEmpty: {
message: '\u003Cspan style=color:#ff0000;\u003Eerror.genericConfigurableForm.global-contactOnlineTeam-topic\u003C\/span\u003E',
message_en: '\u003Cspan style=color:#ff0000;\u003Eerror.genericConfigurableForm.global-contactOnlineTeam-topic\u003C\/span\u003E'
}
}
},
'values[longContactFormDefinition_message]': {
trigger: 'blur',
validators: {
notEmpty: {
message: 'Please fill in the field Subject - thank you.',
message_en: 'Please fill in the field Subject - thank you.'
},
stringLength: {
message: 'You have exceeded the maximum length of 1,000 characters for this field',
message_en: 'You have exceeded the maximum length of 1,000 characters for this field',
max: 1000
},
}
},
'values[longContactFormDefinition_callRequest]': {
trigger: 'change',
validators: {
}
},
'values[longContactFormDefinition_contactPrivacyPolicy]': {
trigger: 'change',
validators: {
notEmpty: {
message: 'Mandatory field',
message_en: 'Mandatory field'
},
}
},
'values[longContactFormDefinition_scsMember]': {
trigger: 'change',
validators: {
}
},
'values[longContactFormDefinition_scsMemberNumber]': {
trigger: 'blur',
validators: {
stringLength: {
message: 'You have exceeded the maximum length of 11 characters for this field',
message_en: 'You have exceeded the maximum length of 11 characters for this field',
max: 11
},
}
},
'values[longContactFormDefinition_beSwaMember]': {
trigger: 'change',
validators: {
}
},
'values[longContactFormDefinition_beSwaMemberNumber]': {
trigger: 'blur',
validators: {
}
}
}
})
.on('success.field.fv', function() {
// note: we need to check if there is an error in the form, as the plugin does a validation on field level.
// Validating the whole form on blur of a field is no option, as the customer does not want to see error messages on all fields
// when entering one field. In case of an error on at least one field we disable the submit button manually
var $form = $(this).closest('form');
if ($form.find('.form-group.has-error').length > 0) {
var $button = $form.find('.js-button');
if (!$button.hasClass('disabled')) {
$button.addClass('disabled');
}
}
})
.on('err.field.fv', function(e, data) {
if(data.element.closest('.form-combo-molecule').length){
// Get the messages of field
var messages = data.fv.getMessages(data.element);
// Get the error message content of the field
var errorContent = data.element.closest('.form-combo-molecule').find('.errors');
// Get the hidden error message of the field
var errorField = errorContent.find('small[data-field="' + data.field + '"][style="display: none;"]');
// Loop over the messages
for (var i in messages) {
if (errorField[1] == undefined) {
var newErrorContainer = document.createElement("small");
$(newErrorContainer).attr("class", "help-block");
$(newErrorContainer).attr("data-field", data.field);
$(newErrorContainer).attr("data-fv-validator", "callback");
$(newErrorContainer).attr("data-fv-for", $(data.element[0]).attr("name") );
$(newErrorContainer).attr("data-fv-result", "INVALID");
$(newErrorContainer).attr("data-tracked", "true");
$(newErrorContainer).html(messages[i]);
if (errorContent.text().includes(messages[i])) {
$(newErrorContainer).hide();
}
errorContent.append(newErrorContainer);
}
}
}
})
.on('success.field.fv', function(e, data) {
// Remove the field messages
$errorContent = data.element.closest('.form-combo-molecule').find('.errors');
$errorContent.find('small[data-field="' + data.field + '"]').remove();
$errorContent.find('small[data-fv-result="INVALID"]').removeAttr("style");
})
.on('success.form.fv', function() {
var formId = 'longContactForm';
if (!formId || formId === 'cfRequest' || formId === 'cfResponse') {
formId = 'longContactFormDefinition';
}
ACC.tracking.pushFormSubmit(formId);
});
var replaceDatePatternWithValue = function(mandatory, fieldConfigCode, fieldConfigPattern) {
var date = fieldConfigPattern.toUpperCase();
var year = $("#" + fieldConfigCode + "_year").val();
var month = $("#" + fieldConfigCode + "_month").val();
var day = $("#" + fieldConfigCode + "_day").val();
date = date.replace(/[Y]+/, year);
date = date.replace(/[M]+/, month);
date = date.replace(/[D]+/, day);
var hiddenDateField = $('.js-' + fieldConfigCode + '_hidden');
if (mandatory) {
hiddenDateField.val(date);
} else {
hiddenDateField.val(date == "" ? "" : date);
}
}
var triggerFormValidation = function(fieldId, mandatory, fieldCode, dateFormat) {
replaceDatePatternWithValue(mandatory, fieldCode, dateFormat);
$('.js-fieldCode').formValidation('revalidateField', 'values[fieldCode_'+ fieldId + ']');
}
var removeDateMoleculeError = function(molecule) {
if(molecule.hasClass('has-error')){
molecule.removeClass('has-error');
molecule.find('.help-block').find('span').remove();
}
}