diff --git a/app/components/validated_field_component.rb b/app/components/validated_field_component.rb index 7a609057c29..097e215575e 100644 --- a/app/components/validated_field_component.rb +++ b/app/components/validated_field_component.rb @@ -1,5 +1,5 @@ class ValidatedFieldComponent < BaseComponent - attr_reader :form, :name, :tag_options + attr_reader :form, :name, :tag_options, :input_type alias_method :f, :form @@ -8,23 +8,36 @@ def initialize(form:, name:, error_messages: {}, **tag_options) @name = name @error_messages = error_messages @tag_options = tag_options + @input_type = inferred_input_type end def error_messages { valueMissing: value_missing_error_message, + typeMismatch: type_mismatch_error_message, **@error_messages, - } + }.compact end private def value_missing_error_message - case form.send(:default_input_type, name, form.send(:find_attribute_column, name), tag_options) + case input_type when :boolean t('forms.validation.required_checkbox') else t('simple_form.required.text') end end + + def type_mismatch_error_message + case input_type + when :email + t('valid_email.validations.email.invalid') + end + end + + def inferred_input_type + form.send(:default_input_type, name, form.send(:find_attribute_column, name), tag_options) + end end diff --git a/app/forms/register_user_email_form.rb b/app/forms/register_user_email_form.rb index 9b625e4dc98..cf315f9d29a 100644 --- a/app/forms/register_user_email_form.rb +++ b/app/forms/register_user_email_form.rb @@ -38,7 +38,7 @@ def validate_terms_accepted end def submit(params, instructions = nil) - @terms_accepted = params[:terms_accepted] == 'true' + @terms_accepted = params[:terms_accepted] == '1' build_user_and_email_address_with_email( email: params[:email], email_language: params[:email_language], diff --git a/app/javascript/packages/validated-field/index.js b/app/javascript/packages/validated-field/index.js index 4736c283bcc..4fc77447f8f 100644 --- a/app/javascript/packages/validated-field/index.js +++ b/app/javascript/packages/validated-field/index.js @@ -66,7 +66,9 @@ export class ValidatedField extends HTMLElement { setErrorMessage(message) { if (message) { this.getOrCreateErrorMessageElement().textContent = message; - this.input?.focus(); + if (!document.activeElement?.classList.contains('usa-input--error')) { + this.input?.focus(); + } } else if (this.errorMessage) { this.inputWrapper?.removeChild(this.errorMessage); this.errorMessage = null; diff --git a/app/javascript/packages/validated-field/index.spec.js b/app/javascript/packages/validated-field/index.spec.js index e93d04a8618..cf1c0cdbaf9 100644 --- a/app/javascript/packages/validated-field/index.spec.js +++ b/app/javascript/packages/validated-field/index.spec.js @@ -8,8 +8,11 @@ describe('ValidatedField', () => { customElements.define('lg-validated-field', ValidatedField); }); + let idCounter = 0; + function createAndConnectElement({ hasInitialError = false } = {}) { const element = document.createElement('lg-validated-field'); + const errorMessageId = ++idCounter; element.innerHTML = `