Registrieren
$(this).siblings('.js-lu-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: 'Bitte wählen Sie eine Anrede.',
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(new RegExp('^([^.#=&%$§\\!~;:¶\\*\\?\\+]*[\\u00C0-\\u02b8A-Za-z \\\'-][^.#=&%$§\\!~;:¶\\*\\?\\+])?$', ''))) {
messages.push("Nur Buchstaben eingeben (keine Satzzeichen)");
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: 'Bitte geben Sie Ihren Vornamen ein.',
message_en: 'Please enter your first name.'
},
stringLength: {
message: 'Sie haben mehr Zeichen eingegeben als die in diesem Feld erlaubte Anzahl von 40 Zeichen',
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(new RegExp('^([^.#=&%$§\\!~;:¶\\*\\?\\+]*[\\u00C0-\\u02b8A-Za-z \\\'-][^.#=&%$§\\!~;:¶\\*\\?\\+])?$', ''))) {
messages.push("Nur Buchstaben eingeben (keine Satzzeichen)");
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: 'Bitte geben Sie Ihren Familiennamen ein.',
message_en: 'Please enter your last name.'
},
stringLength: {
message: 'Sie haben mehr Zeichen eingegeben als die in diesem Feld erlaubte Anzahl von 40 Zeichen',
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(new RegExp('^(?!(.*(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("Veuillez noter que les caractères spéciaux ()\/,");
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: 'Ihre Straße, Nr. eingeben',
message_en: 'Enter your street\/number'
},
stringLength: {
message: 'Sie haben mehr Zeichen eingegeben als die in diesem Feld erlaubte Anzahl von 40 Zeichen',
message_en: 'You have exceeded the maximum length of 40 characters for this field',
max: 40
},
}
},
'values[longRegistrationFormDefinition_addressLine2]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match(new RegExp('^(?!(.*(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("Veuillez noter que les caractères spéciaux ()\/,");
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: 'Sie haben mehr Zeichen eingegeben als die in diesem Feld erlaubte Anzahl von 40 Zeichen',
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(new RegExp('^\\d{4}$', ''))) {
messages.push("Bitte korrigieren Sie die PLZ. z.B. 5331 Moutfort (4 Ziffern)");
messagesEN.push("please correct the postal\/ZIP code. e.g. 5331 Moutfort (4 digits)");
errorOccured |= true;
}
if (errorOccured) {
return {
valid: false,
message: messages.join("<br/>"),
message_en: messagesEN
}
} else {
return true;
}
}
},
notEmpty: {
message: 'Bitte geben Sie eine PLZ ein.',
message_en: 'Please enter your postal\/ZIP code.'
},
stringLength: {
message: 'Sie haben mehr Zeichen eingegeben als die in diesem Feld erlaubte Anzahl von 10 Zeichen',
message_en: 'You have exceeded the maximum length of 10 characters for this field',
max: 10
},
}
},
'values[longRegistrationFormDefinition_town]': {
trigger: 'blur',
validators: {
notEmpty: {
message: 'Bitte geben Sie Ihren Ort ein.',
message_en: 'Please enter your town\/city.'
},
stringLength: {
message: 'Sie haben mehr Zeichen eingegeben als die in diesem Feld erlaubte Anzahl von 40 Zeichen',
message_en: 'You have exceeded the maximum length of 40 characters for this field',
max: 40
},
}
},
'values[longRegistrationFormDefinition_country]': {
trigger: 'change',
validators: {
notEmpty: {
message: 'Bitte geben Sie ein Land\/Region ein.',
message_en: 'Please enter your country\/region.'
}
}
},
'values[longRegistrationFormDefinition_phone]': {
trigger: 'blur',
validators: {
callback: {
callback: function(value, validator, $field) {
var messages = [];
var messagesEN = [];
var errorOccured = false;
if (!value.trim().match(new RegExp('[\\\\+]{0,1}[0-9\\\\(\\\\)\\- \\\\.]*$', ''))) {
messages.push("Bitte geben Sie Ihre Telefonnummer ein. (Nur Zahlen, keine Abstände)");
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: 'Bitte befüllen Sie das Feld Telefon',
message_en: 'Please enter your telephone number'
},
stringLength: {
message: 'Sie haben mehr Zeichen eingegeben als die in diesem Feld erlaubte Anzahl von 20 Zeichen',
message_en: 'You have exceeded the maximum length of 20 characters for this field',
},
callbackPhone: {
alias: 'callback',
message: 'Bitte befüllen Sie das Feld Telefon',
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: 'Bitte geben Sie eine E-Mail-Adresse ein.',
message_en: 'Please enter your email address.'
},
notEmpty: {
message: 'Bitte geben Sie eine E-Mail-Adresse ein.',
message_en: 'Please enter your email address.'
},
stringLength: {
message: 'In diesem Feld darf die Anzahl der Zeichen nur zwischen 0 und 70 liegen',
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: 'Bitte geben Sie eine E-Mail-Adresse ein.',
message_en: 'Please enter your email address.'
},
notEmpty: {
message: 'Bitte geben Sie eine E-Mail-Adresse ein.',
message_en: 'Please enter your email address.'
},
stringLength: {
message: 'In diesem Feld darf die Anzahl der Zeichen nur zwischen 0 und 70 liegen',
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: 'Die Angaben stimmen nicht überein.',
message_en: 'The fields do not match.'
}
}
},
'values[longRegistrationFormDefinition_birthdate_day]': {
err: "#longRegistrationFormDefinition_birthdate-date-error-messages",
excluded: false,
trigger: 'blur',
validators: {
callback: {
message: 'Bitte geben Sie einen gültigen Geburtstag ein',
message_en: 'Bitte geben Sie einen gültigen Geburtstag ein',
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-lu-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_month');
}
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_year]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-lu-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: 'Bitte geben Sie einen gültigen Geburtsmonat ein',
message_en: 'Bitte geben Sie einen gültigen Geburtsmonat ein',
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-lu-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_day]');
}
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_year]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-lu-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-lu-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: 'Bitte geben Sie ein gültiges Geburtsjahr ein',
message_en: 'Bitte geben Sie ein gültiges Geburtsjahr ein',
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-lu-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_day]');
}
if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_month]' +"']").attr('data-fv-result') == "INVALID") {
$('.js-lu-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-lu-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(new RegExp('(^$|^(?=.*[0-9])(?=.*[A-Z]).{7,}$)', ''))) {
messages.push("Das Kennwort muss mindestens 7 Zeichen lang sein, sowie eine Zahl und einen Großbuchstaben enthalten.");
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: 'Bitte geben Sie eine Kennwort an.',
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(new RegExp('(^$|^(?=.*[0-9])(?=.*[A-Z]).{7,}$)', ''))) {
messages.push("Das Kennwort muss mindestens 7 Zeichen lang sein, sowie eine Zahl und einen Großbuchstaben enthalten.");
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: 'Bitte bestätigen Sie Ihr Passwort.',
message_en: 'Please confirm your password.'
},
identical: {
field: 'values[longRegistrationFormDefinition_password]',
message: 'Die Angaben stimmen nicht überein.',
message_en: 'The fields do not match.'
}
}
},
'values[longRegistrationFormDefinition_besMembershipRequest]': {
trigger: 'change',
validators: {
}
},
'values[longRegistrationFormDefinition_besNewsletterRequest]': {
trigger: 'change',
validators: {
}
},
'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");
});
