$(this).siblings('.js-jp-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: 'Mr.またはMrs.／Ms.を選択してください', message_en: 'Please select a title' } } }, 'values[longRegistrationFormDefinition_firstName]': { trigger: 'blur', validators: { notEmpty: { message: 'お客様の名を入力してください。', message_en: 'Please enter your first name.' }, stringLength: { message: 'この項目の最大入力文字数である40字を超えました', message_en: 'You have exceeded the maximum length of 40 characters for this field', max: 40 }, } }, 'values[longRegistrationFormDefinition_lastName]': { trigger: 'blur', validators: { notEmpty: { message: '姓を入力してください。', message_en: 'Please enter your last name.' }, stringLength: { message: 'この項目の最大入力文字数である40字を超えました', message_en: 'You have exceeded the maximum length of 40 characters for this field', max: 40 }, } }, 'values[longRegistrationFormDefinition_katakanaFirstName]': { trigger: 'blur', validators: { notEmpty: { message: 'フリガナを入力してください。', message_en: 'Please enter your first name (in Katakana).' }, stringLength: { message: 'この項目の最大入力文字数である40字を超えました', message_en: 'You have exceeded the maximum length of 40 characters for this field', max: 40 }, } }, 'values[longRegistrationFormDefinition_katakanaLastName]': { trigger: 'blur', validators: { notEmpty: { message: 'フリガナを入力してください。', message_en: 'Please enter your last name (in Katakana).' }, stringLength: { message: 'この項目の最大入力文字数である40字を超えました', 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("Adresiniz geçersiz. Lütfen geçerli bir adres girin."); 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: 'お客様の町名番地を入力してください。', message_en: 'Enter your street\/number' }, stringLength: { message: 'この項目の最大入力文字数である40字を超えました', 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("^(?!(.*(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("Adresiniz geçersiz. Lütfen geçerli bir adres girin."); 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: 'この項目の最大入力文字数である40字を超えました', 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{4}$")) { messages.push("郵便番号が正しくありません。もう一度入力してください。 例：東京都100-8799　(3桁数字－4桁数字）"); messagesEN.push("please correct the postal\/ZIP code. e.g. 100-8799 Tokyo (3 digits followed by \'-\' and then the last 4 digits)"); errorOccured |= true; } if (errorOccured) { return { valid: false, message: messages.join("<br/>"), message_en: messagesEN } } else { return true; } } }, notEmpty: { message: '郵便番号を入力してください。', message_en: 'Please enter your postal\/ZIP code.' }, stringLength: { message: 'この項目の最大入力文字数である10字を超えました', message_en: 'You have exceeded the maximum length of 10 characters for this field', max: 10 }, } }, 'values[longRegistrationFormDefinition_town]': { trigger: 'blur', validators: { notEmpty: { message: '市区町村を欄に記入してください。', message_en: 'Please enter your town\/city.' }, stringLength: { message: 'この項目の最大入力文字数である40字を超えました', message_en: 'You have exceeded the maximum length of 40 characters for this field', max: 40 }, } }, 'values[longRegistrationFormDefinition_country]': { trigger: 'change', validators: { notEmpty: { message: '国を選択してください。', message_en: 'Please enter your country.' } } }, 'values[longRegistrationFormDefinition_region]': { trigger: 'change', validators: { notEmpty: { message: '都道府県を選択してください', message_en: 'Please choose a region' } } }, '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("電話番号を欄に記入してください。（数字のみ、スペース不可）"); 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: '電話番号を欄に記入してください', message_en: 'Please enter your telephone number' }, stringLength: { message: 'この項目の最大入力文字数である20字を超えました', message_en: 'You have exceeded the maximum length of 20 characters for this field', }, callbackPhone: { alias: 'callback', message: '電話番号を欄に記入してください', 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: 'Eメールアドレスを入力してください。', message_en: 'Please enter your email address.' }, notEmpty: { message: 'Eメールアドレスを入力してください。', message_en: 'Please enter your email address.' }, stringLength: { message: 'この項目の入力可能文字数は0〜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: 'Eメールアドレスを入力してください。', message_en: 'Please enter your email address.' }, notEmpty: { message: 'Eメールアドレスを入力してください。', message_en: 'Please enter your email address.' }, stringLength: { message: 'この項目の入力可能文字数は0〜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: 'フィールドがマッチしません。', message_en: 'The fields do not match.' } } }, 'values[longRegistrationFormDefinition_birthdate_day]': { err: "#longRegistrationFormDefinition_birthdate-date-error-messages", excluded: false, trigger: 'blur', validators: { callback: { message: '生年月日の日を正しく入力してください', message_en: '生年月日の日を正しく入力してください', 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-jp-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_month'); } if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_year]' +"']").attr('data-fv-result') == "INVALID") { $('.js-jp-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: '生年月日の月を正しく入力してください', message_en: '生年月日の月を正しく入力してください', 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-jp-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_day]'); } if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_year]' +"']").attr('data-fv-result') == "INVALID") { $('.js-jp-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-jp-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: '生年月日の年を正しく入力してください', message_en: '生年月日の年を正しく入力してください', 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-jp-longRegistrationFormConfig').formValidation('revalidateField', 'values[longRegistrationFormDefinition_birthdate_day]'); } if ($("small[data-fv-for='" + 'values[longRegistrationFormDefinition_birthdate_month]' +"']").attr('data-fv-result') == "INVALID") { $('.js-jp-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-jp-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("入力されたパスワードは弊社のパスワードポリシーを満たしていません。最低1文字の数字と大文字を含む7文字以上の英数字でパスワードを設定してください。"); 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: 'パスワードを入力してください。', 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("入力されたパスワードは弊社のパスワードポリシーを満たしていません。最低1文字の数字と大文字を含む7文字以上の英数字でパスワードを設定してください。"); 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: 'パスワードを確認してください。', message_en: 'Please confirm your password.' }, identical: { field: 'values[longRegistrationFormDefinition_password]', message: 'フィールドがマッチしません。', 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", "yyyy.MM.dd"); }); $('.js-longRegistrationFormDefinition_birthdate_month').blur(function() { removeDateMoleculeError($('.js-longRegistrationFormDefinition_birthdate').closest('.form-combo-molecule')); triggerFormValidation("month", false, "longRegistrationFormDefinition_birthdate", "yyyy.MM.dd"); }); $('.js-longRegistrationFormDefinition_birthdate_year').blur(function() { removeDateMoleculeError($('.js-longRegistrationFormDefinition_birthdate').closest('.form-combo-molecule')); triggerFormValidation("year", false, "longRegistrationFormDefinition_birthdate", "yyyy.MM.dd"); });