From abd498dd33a1e9d5a2091aade31a7685dcfc1072 Mon Sep 17 00:00:00 2001 From: Pete Matsyburka Date: Fri, 15 May 2026 20:29:55 +0300 Subject: [PATCH] adjust validation message --- app/javascript/application.js | 2 - app/javascript/elements/custom_validation.js | 14 --- app/javascript/submission_form/i18n.js | 98 +++++++++++++++++++ app/javascript/submission_form/text_step.vue | 18 +++- app/views/start_form/show.html.erb | 4 +- app/views/submissions/_detailed_form.html.erb | 24 ++--- app/views/submissions/_phone_form.html.erb | 12 +-- app/views/submitters/edit.html.erb | 8 +- 8 files changed, 133 insertions(+), 47 deletions(-) delete mode 100644 app/javascript/elements/custom_validation.js diff --git a/app/javascript/application.js b/app/javascript/application.js index af25f2b4..311b1612 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -47,7 +47,6 @@ import ScrollTo from './elements/scroll_to' import SetValue from './elements/set_value' import ReviewForm from './elements/review_form' import ShowOnValue from './elements/show_on_value' -import CustomValidation from './elements/custom_validation' import ToggleClasses from './elements/toggle_classes' import AutosizeField from './elements/autosize_field' import GoogleDriveFilePicker from './elements/google_drive_file_picker' @@ -139,7 +138,6 @@ safeRegisterElement('scroll-to', ScrollTo) safeRegisterElement('set-value', SetValue) safeRegisterElement('review-form', ReviewForm) safeRegisterElement('show-on-value', ShowOnValue) -safeRegisterElement('custom-validation', CustomValidation) safeRegisterElement('toggle-classes', ToggleClasses) safeRegisterElement('autosize-field', AutosizeField) safeRegisterElement('google-drive-file-picker', GoogleDriveFilePicker) diff --git a/app/javascript/elements/custom_validation.js b/app/javascript/elements/custom_validation.js deleted file mode 100644 index ac738679..00000000 --- a/app/javascript/elements/custom_validation.js +++ /dev/null @@ -1,14 +0,0 @@ -export default class extends HTMLElement { - connectedCallback () { - const input = this.querySelector('input') - const invalidMessage = this.dataset.invalidMessage || '' - - input.addEventListener('invalid', () => { - input.setCustomValidity(input.value ? invalidMessage : '') - }) - - input.addEventListener('input', () => { - input.setCustomValidity('') - }) - } -} diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js index 2a265d18..f2e103f3 100644 --- a/app/javascript/submission_form/i18n.js +++ b/app/javascript/submission_form/i18n.js @@ -7,6 +7,13 @@ const en = { kba: 'KBA', please_upload_an_image_file: 'Please upload an image file', must_be_characters_length: 'Must be {number} characters long', + must_be_valid_ssn: 'Must be a valid SSN (XXX-XX-XXXX)', + must_be_valid_ein: 'Must be a valid EIN (XX-XXXXXXX)', + must_be_valid_email: 'Must be a valid email address', + must_be_valid_url: 'Must be a valid URL (starting with http:// or https://)', + must_be_valid_zip: 'Must be a valid ZIP code (XXXXX or XXXXX-XXXX)', + must_contain_numbers_only: 'Must contain numbers only', + must_contain_letters_only: 'Must contain letters only', complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.', verify_id: 'Verify ID', identity_verification: 'Identity verification', @@ -116,6 +123,13 @@ const es = { kba: 'KBA', please_upload_an_image_file: 'Por favor, sube un archivo de imagen', must_be_characters_length: 'Debe tener {number} caracteres de longitud', + must_be_valid_ssn: 'Debe ser un SSN válido (XXX-XX-XXXX)', + must_be_valid_ein: 'Debe ser un EIN válido (XX-XXXXXXX)', + must_be_valid_email: 'Debe ser una dirección de correo electrónico válida', + must_be_valid_url: 'Debe ser una URL válida (que comience con http:// o https://)', + must_be_valid_zip: 'Debe ser un ZIP válido (XXXXX o XXXXX-XXXX)', + must_contain_numbers_only: 'Debe contener solo números', + must_contain_letters_only: 'Debe contener solo letras', complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.', verify_id: 'Verificar ID', identity_verification: 'Verificación de identidad', @@ -225,6 +239,13 @@ const it = { kba: 'KBA', please_upload_an_image_file: 'Per favore carica un file immagine', must_be_characters_length: 'Deve essere lungo {number} caratteri', + must_be_valid_ssn: 'Deve essere un SSN valido (XXX-XX-XXXX)', + must_be_valid_ein: 'Deve essere un EIN valido (XX-XXXXXXX)', + must_be_valid_email: 'Deve essere un indirizzo email valido', + must_be_valid_url: 'Deve essere un URL valido (che inizia con http:// o https://)', + must_be_valid_zip: 'Deve essere uno ZIP valido (XXXXX o XXXXX-XXXX)', + must_contain_numbers_only: 'Deve contenere solo numeri', + must_contain_letters_only: 'Deve contenere solo lettere', complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.", verify_id: 'Verifica ID', identity_verification: "Verifica dell'identità", @@ -334,6 +355,13 @@ const de = { kba: 'KBA', please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch', must_be_characters_length: 'Muss {number} Zeichen lang sein', + must_be_valid_ssn: 'Muss eine gültige SSN sein (XXX-XX-XXXX)', + must_be_valid_ein: 'Muss eine gültige EIN sein (XX-XXXXXXX)', + must_be_valid_email: 'Muss eine gültige E-Mail-Adresse sein', + must_be_valid_url: 'Muss eine gültige URL sein (beginnend mit http:// oder https://)', + must_be_valid_zip: 'Muss eine gültige ZIP sein (XXXXX oder XXXXX-XXXX)', + must_contain_numbers_only: 'Darf nur Zahlen enthalten', + must_contain_letters_only: 'Darf nur Buchstaben enthalten', complete_all_required_fields_to_proceed_with_identity_verification: 'Füllen Sie alle Pflichtfelder aus, um mit der Identitätsprüfung fortzufahren.', verify_id: 'ID überprüfen', identity_verification: 'Identitätsprüfung', @@ -443,6 +471,13 @@ const fr = { kba: 'KBA', please_upload_an_image_file: 'Veuillez téléverser un fichier image', must_be_characters_length: 'Doit comporter {number} caractères', + must_be_valid_ssn: 'Doit être un SSN valide (XXX-XX-XXXX)', + must_be_valid_ein: 'Doit être un EIN valide (XX-XXXXXXX)', + must_be_valid_email: 'Doit être une adresse e-mail valide', + must_be_valid_url: 'Doit être une URL valide (commençant par http:// ou https://)', + must_be_valid_zip: 'Doit être un ZIP valide (XXXXX ou XXXXX-XXXX)', + must_contain_numbers_only: 'Doit contenir uniquement des chiffres', + must_contain_letters_only: 'Doit contenir uniquement des lettres', complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour poursuivre la vérification d'identité.", verify_id: "Vérifier l'ID", identity_verification: "Vérification d'identité", @@ -552,6 +587,13 @@ const pl = { kba: 'KBA', please_upload_an_image_file: 'Proszę przesłać plik obrazu', must_be_characters_length: 'Musi mieć długość {number} znaków', + must_be_valid_ssn: 'Musi być prawidłowym numerem SSN (XXX-XX-XXXX)', + must_be_valid_ein: 'Musi być prawidłowym numerem EIN (XX-XXXXXXX)', + must_be_valid_email: 'Musi być prawidłowym adresem e-mail', + must_be_valid_url: 'Musi być prawidłowym adresem URL (zaczynającym się od http:// lub https://)', + must_be_valid_zip: 'Musi być prawidłowym ZIP (XXXXX lub XXXXX-XXXX)', + must_contain_numbers_only: 'Może zawierać tylko cyfry', + must_contain_letters_only: 'Może zawierać tylko litery', complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.', verify_id: 'Zweryfikuj ID', identity_verification: 'Weryfikacja tożsamości', @@ -661,6 +703,13 @@ const uk = { kba: 'KBA', please_upload_an_image_file: 'Будь ласка, завантажте файл зображення', must_be_characters_length: 'Має містити {number} символів', + must_be_valid_ssn: 'Має бути дійсним SSN (XXX-XX-XXXX)', + must_be_valid_ein: 'Має бути дійсним EIN (XX-XXXXXXX)', + must_be_valid_email: 'Має бути дійсною адресою електронної пошти', + must_be_valid_url: 'Має бути дійсним URL (починаючи з http:// або https://)', + must_be_valid_zip: 'Має бути дійсним ZIP (XXXXX або XXXXX-XXXX)', + must_contain_numbers_only: 'Має містити лише цифри', + must_contain_letters_only: 'Має містити лише літери', complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.", verify_id: 'Підтвердження ідентичності', identity_verification: 'Ідентифікація особи', @@ -770,6 +819,13 @@ const cs = { kba: 'KBA', please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor', must_be_characters_length: 'Musí mít délku {number} znaků', + must_be_valid_ssn: 'Musí být platné SSN (XXX-XX-XXXX)', + must_be_valid_ein: 'Musí být platné EIN (XX-XXXXXXX)', + must_be_valid_email: 'Musí být platná e-mailová adresa', + must_be_valid_url: 'Musí být platná URL (začínající http:// nebo https://)', + must_be_valid_zip: 'Musí být platný ZIP (XXXXX nebo XXXXX-XXXX)', + must_contain_numbers_only: 'Musí obsahovat pouze čísla', + must_contain_letters_only: 'Musí obsahovat pouze písmena', complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.', verify_id: 'Ověřit ID', identity_verification: 'Ověření identity', @@ -879,6 +935,13 @@ const pt = { kba: 'KBA', please_upload_an_image_file: 'Por favor, envie um arquivo de imagem', must_be_characters_length: 'Deve ter {number} caracteres', + must_be_valid_ssn: 'Deve ser um SSN válido (XXX-XX-XXXX)', + must_be_valid_ein: 'Deve ser um EIN válido (XX-XXXXXXX)', + must_be_valid_email: 'Deve ser um endereço de e-mail válido', + must_be_valid_url: 'Deve ser uma URL válida (começando com http:// ou https://)', + must_be_valid_zip: 'Deve ser um ZIP válido (XXXXX ou XXXXX-XXXX)', + must_contain_numbers_only: 'Deve conter apenas números', + must_contain_letters_only: 'Deve conter apenas letras', complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.', verify_id: 'Verificar ID', identity_verification: 'Verificação de identidade', @@ -988,6 +1051,13 @@ const he = { kba: 'KBA', please_upload_an_image_file: 'אנא העלה קובץ תמונה', must_be_characters_length: 'חייב להיות באורך של {number} תווים', + must_be_valid_ssn: 'חייב להיות SSN חוקי (XXX-XX-XXXX)', + must_be_valid_ein: 'חייב להיות EIN חוקי (XX-XXXXXXX)', + must_be_valid_email: 'חייבת להיות כתובת אימייל חוקית', + must_be_valid_url: 'חייבת להיות כתובת URL חוקית (המתחילה ב-http:// או https://)', + must_be_valid_zip: 'חייב להיות ZIP חוקי (XXXXX או XXXXX-XXXX)', + must_contain_numbers_only: 'חייב להכיל מספרים בלבד', + must_contain_letters_only: 'חייב להכיל אותיות בלבד', complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.', verify_id: 'אמת מזהה', identity_verification: 'אימות זהות', @@ -1097,6 +1167,13 @@ const nl = { kba: 'KBA', please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand', must_be_characters_length: 'Moet {number} tekens lang zijn', + must_be_valid_ssn: 'Moet een geldig SSN zijn (XXX-XX-XXXX)', + must_be_valid_ein: 'Moet een geldig EIN zijn (XX-XXXXXXX)', + must_be_valid_email: 'Moet een geldig e-mailadres zijn', + must_be_valid_url: 'Moet een geldige URL zijn (beginnend met http:// of https://)', + must_be_valid_zip: 'Moet een geldige ZIP zijn (XXXXX of XXXXX-XXXX)', + must_contain_numbers_only: 'Mag alleen cijfers bevatten', + must_contain_letters_only: 'Mag alleen letters bevatten', complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.', verify_id: 'ID verifiëren', identity_verification: 'Identiteitsverificatie', @@ -1206,6 +1283,13 @@ const ar = { kba: 'KBA', please_upload_an_image_file: 'يرجى تحميل ملف صورة', must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا', + must_be_valid_ssn: 'يجب أن يكون SSN صالحًا (XXX-XX-XXXX)', + must_be_valid_ein: 'يجب أن يكون EIN صالحًا (XX-XXXXXXX)', + must_be_valid_email: 'يجب أن يكون عنوان بريد إلكتروني صالحًا', + must_be_valid_url: 'يجب أن يكون عنوان URL صالحًا (يبدأ بـ http:// أو https://)', + must_be_valid_zip: 'يجب أن يكون ZIP صالحًا (XXXXX أو XXXXX-XXXX)', + must_contain_numbers_only: 'يجب أن يحتوي على أرقام فقط', + must_contain_letters_only: 'يجب أن يحتوي على أحرف فقط', complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.', verify_id: 'تحقق من الهوية', identity_verification: 'التحقق من الهوية', @@ -1315,6 +1399,13 @@ const ko = { kba: 'KBA', please_upload_an_image_file: '이미지 파일을 업로드해 주세요', must_be_characters_length: '{number}자여야 합니다', + must_be_valid_ssn: '유효한 SSN이어야 합니다 (XXX-XX-XXXX)', + must_be_valid_ein: '유효한 EIN이어야 합니다 (XX-XXXXXXX)', + must_be_valid_email: '유효한 이메일 주소여야 합니다', + must_be_valid_url: '유효한 URL이어야 합니다 (http:// 또는 https://로 시작)', + must_be_valid_zip: '유효한 ZIP이어야 합니다 (XXXXX 또는 XXXXX-XXXX)', + must_contain_numbers_only: '숫자만 포함해야 합니다', + must_contain_letters_only: '문자만 포함해야 합니다', complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.', verify_id: '아이디 확인', identity_verification: '신원 확인', @@ -1424,6 +1515,13 @@ const ja = { kba: 'KBA', please_upload_an_image_file: '画像ファイルをアップロードしてください', must_be_characters_length: '{number}文字でなければなりません', + must_be_valid_ssn: '有効なSSNである必要があります (XXX-XX-XXXX)', + must_be_valid_ein: '有効なEINである必要があります (XX-XXXXXXX)', + must_be_valid_email: '有効なメールアドレスである必要があります', + must_be_valid_url: '有効なURLである必要があります (http://またはhttps://で始まる)', + must_be_valid_zip: '有効なZIPである必要があります (XXXXX または XXXXX-XXXX)', + must_contain_numbers_only: '数字のみを含む必要があります', + must_contain_letters_only: '文字のみを含む必要があります', complete_all_required_fields_to_proceed_with_identity_verification: '本人確認を進めるには、すべての必須項目を入力してください。', verify_id: '本人確認', identity_verification: '本人確認', diff --git a/app/javascript/submission_form/text_step.vue b/app/javascript/submission_form/text_step.vue index 0fde1202..c8695c26 100644 --- a/app/javascript/submission_form/text_step.vue +++ b/app/javascript/submission_form/text_step.vue @@ -41,12 +41,11 @@ :class="{ '!pr-11 -mr-10': !field.validation?.pattern }" :required="field.required" :pattern="field.validation?.pattern" + :title="validationMessage" :aria-describedby="field.description ? field.uuid + '-desc' : undefined" :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`" type="text" :name="`values[${field.uuid}]`" - @invalid="validationMessage ? $event.target.setCustomValidity(validationMessage) : ''" - @input="validationMessage ? $event.target.setCustomValidity('') : ''" @focus="$emit('focus')" >