Register
$('#se-longRegistrationFormConfig')
.formValidation({
autoFocus: false,
framework: 'bootstrap',
icon: {
valid: null,
invalid: null,
validating: null
},
fields: {
'values[longRegistrationFormDefinition_shippingAddress]': {
trigger: 'change',
validators: {
notEmpty: {
message: '\u003Cspan style=color:#ff0000;\u003Eerror.genericConfigurableForm.shippingAddress\u003C\/span\u003E',
message_en: '\u003Cspan style=color:#ff0000;\u003Eerror.genericConfigurableForm.shippingAddress\u003C\/span\u003E'
}
}
},
'values[longRegistrationFormDefinition_title]': {
trigger: 'change',
validators: {
notEmpty: {
message: 'Please select a title',
message_en: 'Please select a title'
}
}
},
'values[longRegistrationFormDefinition_firstName]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match("^([^.#=&%$§\\!~;:¶\\*\\?\\+]*[\\u00C0-\\u02b8A-Za-z \\\'-][^.#=&%$§\\!~;:¶\\*\\?\\+])?$")) {
messages.push("Only letters are allowed");
messagesEN.push("Only letters are allowed");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
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[longRegistrationFormDefinition_lastName]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match("^([^.#=&%$§\\!~;:¶\\*\\?\\+]*[\\u00C0-\\u02b8A-Za-z \\\'-][^.#=&%$§\\!~;:¶\\*\\?\\+])?$")) {
messages.push("Only letters are allowed");
messagesEN.push("Only letters are allowed");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
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[longRegistrationFormDefinition_addressLine1]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match("^(?!(.*(mailbox|Postfach|postfach|post fach|Post Fach|Post fach|post Fach|Mailbox|PO Box|Post Box|Post Office Box|Postal Box|Packstation|packstation|pack station|Schließfach|schließfach|schliessfach|Boîte Postale|Casier postal|Case Postale|私書箱)))(.*)$")) {
messages.push("Your address is not valid. Please enter a valid address. Delivery to PO Box is not possible.");
messagesEN.push("Your address is not valid. Please enter a valid address. Delivery to PO Box is not possible.");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
notEmpty: {
message: 'Enter your street\/number',
message_en: 'Enter your street\/number'
},
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[longRegistrationFormDefinition_addressLine2]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match("^(?!(.*(mailbox|Postfach|postfach|post fach|Post Fach|Post fach|post Fach|Mailbox|PO Box|Post Box|Post Office Box|Postal Box|Packstation|packstation|pack station|Schließfach|schließfach|schliessfach|Boîte Postale|Casier postal|Case Postale|私書箱))).*$")) {
messages.push("Your address is not valid. Please enter a valid address. Delivery to PO Box is not possible.");
messagesEN.push("Your address is not valid. Please enter a valid address. Delivery to PO Box is not possible.");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
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[longRegistrationFormDefinition_zip]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match("^\\d{3}[\\ ]\\d{2}$")) {
messages.push("please correct the postal\/ZIP code. e.g 212 29 Malmoe 5 digits");
messagesEN.push("please correct the postal\/ZIP code. e.g 212 29 Malmoe 5 digits");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
notEmpty: {
message: 'Please enter your postal\/ZIP code.',
message_en: 'Please enter your postal\/ZIP code.'
},
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[longRegistrationFormDefinition_town]': {
trigger: 'blur',
validators: {
notEmpty: {
message: 'Please enter your town\/city.',
message_en: 'Please enter your town\/city.'
},
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[longRegistrationFormDefinition_country]': {
trigger: 'change',
validators: {
notEmpty: {
message: 'Please enter your country.',
message_en: 'Please enter your country.'
}
}
},
'values[longRegistrationFormDefinition_phone]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match("[\\\\+]{0,1}[0-9\\\\(\\\\)\\- \\\\.]*$")) {
messages.push("please enter your phone number. (Numbers only, no spaces)");
messagesEN.push("please enter your phone number. (Numbers only, no spaces)");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
notEmpty: {
message: 'Please enter your telephone number',
message_en: 'Please enter your telephone number'
},
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 = [];
regexList.push('[\\\\+]{0,1}[0-9\\\\(\\\\)\\- \\\\.]*$');
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[longRegistrationFormDefinition_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[longRegistrationFormDefinition_emailConfirm]': {
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
},
identical: {
field: 'values[longRegistrationFormDefinition_email]',
message: 'The fields do not match.',
message_en: 'The fields do not match.'
}
}
},
'values[longRegistrationFormDefinition_birthdate_day]': {
err: "#longRegistrationFormDefinition_birthdate-date-error-messages",
excluded: false,
trigger: 'blur',
validators: {
callback: {
message: 'Please enter a valid birthdate day',
message_en: 'Please enter a valid birthdate day',
callback: function(value, validator, $field) {
var input = $('#longRegistrationFormDefinition_birthdate_day');
if (ACC.global.isDateFieldEmpty("longRegistrationFormDefinition_birthdate")) {
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_month]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-se-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_month');
}
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_year]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-se-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_year]');
}
input.addClass('date-input-no-confirmation');
return true;
} else {
input.removeClass('date-input-no-confirmation');
}
if ($field.val().match("^\\d+$") == null) {
return false;
}
var value = parseInt($field.val());
var monthValue = $('#longRegistrationFormDefinition_birthdate_month').val();
var yearValue = $('#longRegistrationFormDefinition_birthdate_year').val();
if (monthValue == "" && yearValue == "") {
return value >= 1 && value <= 31;
}
if (monthValue == "2" && yearValue == "") {
return value >= 1 && value <= 29;
}
var month = parseInt(monthValue);
var year = parseInt(yearValue);
return value >= 1 && value <= ACC.global.numberOfDaysInMonth(month, year);
}
}
}
},
'values[longRegistrationFormDefinition_birthdate_month]': {
err: "#longRegistrationFormDefinition_birthdate-date-error-messages",
excluded: false,
trigger: 'blur',
validators: {
callback: {
message: 'Please enter a valid birthdate month',
message_en: 'Please enter a valid birthdate month',
callback: function(value, validator, $field) {
if (ACC.global.isDateFieldEmpty("longRegistrationFormDefinition_birthdate")) {
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_day]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-se-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_day]');
}
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_year]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-se-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_year]');
}
$('#longRegistrationFormDefinition_birthdate_month').addClass('date-input-no-confirmation');
return true;
} else {
$('#longRegistrationFormDefinition_birthdate_month').removeClass('date-input-no-confirmation');
}
if ($field.val().match("^\\d+$") == null){
return false;
}
var value = parseInt($field.val());
if ($('#longRegistrationFormDefinition_birthdate_day').val() != "") {
$('.js-se-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_day]');
}
return value >= 1 && value <= 12;
}
}
}
},
'values[longRegistrationFormDefinition_birthdate_year]': {
err: "#longRegistrationFormDefinition_birthdate-date-error-messages",
excluded: false,
trigger: 'blur',
validators: {
callback: {
message: 'Please enter a valid birthdate year',
message_en: 'Please enter a valid birthdate year',
callback: function(value, validator, $field) {
var value = $field.val();
if (ACC.global.isDateFieldEmpty("longRegistrationFormDefinition_birthdate")) {
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_day]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-se-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_day]');
}
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_month]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-se-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_month]');
}
$('#longRegistrationFormDefinition_birthdate_year').addClass('date-input-no-confirmation');
return true;
} else {
$('#longRegistrationFormDefinition_birthdate_year').removeClass('date-input-no-confirmation');
}
if (value.match("^\\d{4}$") != null) {
if ($('#longRegistrationFormDefinition_birthdate_day').val() != "") {
$('.js-se-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_day]');
}
return true;
}
return false;
}
}
}
},
'values[longRegistrationFormDefinition_password]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match("(^$|^(?=.*[0-9])(?=.*[A-Z]).{7,}$)")) {
messages.push("The password has to be at least 7 characters long as well as contain one number and one capital letter.");
messagesEN.push("The password has to be at least 7 characters long as well as contain one number and one capital letter.");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
notEmpty: {
message: 'Please enter a password.',
message_en: 'Please enter a password.'
},
}
},
'values[longRegistrationFormDefinition_passwordConfirm]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match("(^$|^(?=.*[0-9])(?=.*[A-Z]).{7,}$)")) {
messages.push("The password has to be at least 7 characters long as well as contain one number and one capital letter.");
messagesEN.push("The password has to be at least 7 characters long as well as contain one number and one capital letter.");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
notEmpty: {
message: 'Please confirm your password.',
message_en: 'Please confirm your password.'
},
identical: {
field: 'values[longRegistrationFormDefinition_password]',
message: 'The fields do not match.',
message_en: 'The fields do not match.'
}
}
},
'values[longRegistrationFormDefinition_newsletter]': {
trigger: 'change',
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 = 'registerNewCustomer';
if (!formId || formId === 'cfRequest' || formId === 'cfResponse') {
formId = 'longRegistrationFormDefinition';
}
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();
}
}
$('.js-longRegistrationFormDefinition_birthdate_day').blur(function() {
removeDateMoleculeError($('.js-longRegistrationFormDefinition_birthdate').closest('.form-combo-molecule'));
triggerFormValidation("day", false, "longRegistrationFormDefinition_birthdate", "dd.MM.yyyy");
});
$('.js-longRegistrationFormDefinition_birthdate_month').blur(function() {
removeDateMoleculeError($('.js-longRegistrationFormDefinition_birthdate').closest('.form-combo-molecule'));
triggerFormValidation("month", false, "longRegistrationFormDefinition_birthdate", "dd.MM.yyyy");
});
$('.js-longRegistrationFormDefinition_birthdate_year').blur(function() {
removeDateMoleculeError($('.js-longRegistrationFormDefinition_birthdate').closest('.form-combo-molecule'));
triggerFormValidation("year", false, "longRegistrationFormDefinition_birthdate", "dd.MM.yyyy");
});