# [Enhancement] Add Visual Feedback for Invalid or Empty Required Fields in Child Profile Creation #1153

New Issue

2026-09-28T15:00:34Z

enjin2310 commented

2026-09-28 15:00:34 +00:00

Summary

In SpikerSoft Parent Dashboard, during the child account creation process, required fields do not provide visual feedback when left empty or incorrectly completed. This makes it difficult for users to identify which fields need correction before proceeding. Adding clear visual indicators would improve usability and reduce form submission errors.

Issue Description

When creating a child profile, the form includes several required fields (e.g., Nombre completo, Parentesco, Teléfono). However, if a user leaves these fields blank or enters invalid data, the interface does not visually highlight the issue. The absence of feedback can lead to confusion and failed form submissions.

Environment

Property	Value
Application	SpikerSoft Parent Dashboard
Module	Child Account Creation
Environment	Production
Browser	Firefox / Chrome
Operating System	Windows 11
Version	v2026.09.28c
Device	Desktop

Preconditions

User is creating a new child account and reaches the Emergency step of the form.

Steps to Reproduce

Open SpikerSoft Parent Dashboard.
Click Crear cuenta infantil.
Leave one or more required fields empty (e.g., Nombre completo, Teléfono).
Attempt to proceed to the next step.
Observe that no visual feedback appears indicating which fields are invalid.

Expected Result

Required fields should display visual feedback when incomplete or invalid.
Examples of feedback:
- Red border or highlight around the field.
- Tooltip or message indicating “Campo obligatorio” (Required field).
- Inline error text below the field.

Actual Result

No visual indication appears for incomplete or invalid fields.
Users may not realize why they cannot proceed.

Evidence

The screenshot shows the Emergency Contact section with required fields marked by asterisks but no visual feedback mechanism for validation errors.

Impact

Reduces form clarity and user confidence.
Increases likelihood of incomplete submissions.
Minor but noticeable usability issue.

Frequency

Always

Reproducibility

100%

Severity

Medium (UX enhancement)

Suggested Improvement

Implement real-time validation for required fields.
Add visual cues (color change, icons, or error messages) for invalid or empty inputs.
Ensure accessibility compliance (e.g., screen reader compatibility for error messages).
Maintain consistent feedback styling across all form steps.

## Summary In **SpikerSoft Parent Dashboard**, during the **child account creation process**, required fields do not provide visual feedback when left empty or incorrectly completed. This makes it difficult for users to identify which fields need correction before proceeding. Adding clear visual indicators would improve usability and reduce form submission errors. ## Issue Description When creating a child profile, the form includes several required fields (e.g., *Nombre completo*, *Parentesco*, *Teléfono*). However, if a user leaves these fields blank or enters invalid data, the interface does not visually highlight the issue. The absence of feedback can lead to confusion and failed form submissions. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft Parent Dashboard | | Module | Child Account Creation | | Environment | Production | | Browser | Firefox / Chrome | | Operating System | Windows 11 | | Version | v2026.09.28c | | Device | Desktop | ## Preconditions User is creating a new child account and reaches the **Emergency** step of the form. ## Steps to Reproduce 1. Open **SpikerSoft Parent Dashboard**. 2. Click **Crear cuenta infantil**. 3. Leave one or more required fields empty (e.g., *Nombre completo*, *Teléfono*). 4. Attempt to proceed to the next step. 5. Observe that no visual feedback appears indicating which fields are invalid. ## Expected Result - Required fields should display **visual feedback** when incomplete or invalid. - Examples of feedback: - Red border or highlight around the field. - Tooltip or message indicating “Campo obligatorio” (Required field). - Inline error text below the field. ## Actual Result - No visual indication appears for incomplete or invalid fields. - Users may not realize why they cannot proceed. ## Evidence - The screenshot shows the **Emergency Contact** section with required fields marked by asterisks but no visual feedback mechanism for validation errors. ## Impact - Reduces form clarity and user confidence. - Increases likelihood of incomplete submissions. - Minor but noticeable usability issue. ## Frequency Always ## Reproducibility 100% ## Severity Medium (UX enhancement) ## Suggested Improvement - Implement real-time validation for required fields. - Add visual cues (color change, icons, or error messages) for invalid or empty inputs. - Ensure accessibility compliance (e.g., screen reader compatibility for error messages). - Maintain consistent feedback styling across all form steps.

Screenshot 2026-09-28 105758.png

157 KiB

spikerj referenced this issue from a commit

2026-10-02 03:28:50 +00:00

fix(forms): show invalid state on outline form fields; add child wizard field errors

spikerj commented

2026-10-02 03:42:06 +00:00

Confirmed and fixed — and you found something bigger than this one form. A button that silently does nothing is one of the most confusing things a form can do; thank you.

What was wrong

The form did know the fields were required. That's why the wizard wouldn't move past the Emergency step.
Pressing Siguiente also marked the fields as "touched", which in Angular Material normally turns empty required fields red.
But our site-wide theme forced every field's border and label to the normal grey with !important, and never defined an "invalid" style. So the red was always painted over — on every form on the site, not just this one.
On top of that, the Emergency step had no error text under its fields, so there was no feedback at all.

What changed (spikerj/spikersoft-angular#1408, merged)

Theme: invalid fields now get a red outline and a red label, site-wide, including while the field is focused.
Child account wizard: "Este campo es obligatorio" now appears under the required Emergency contact fields (name, relationship, phone), and an invalid-email message under email. The same "required" message was added to the passport fields and medication name.
The Health step's Siguiente now marks its fields as touched too, like the other steps.
A test now clicks Next with empty fields and checks that the errors appear.

It will be live with the next deploy. Reopen this if a required field still gives no feedback.

Confirmed and **fixed** — and you found something bigger than this one form. A button that silently does nothing is one of the most confusing things a form can do; thank you. **What was wrong** - The form *did* know the fields were required. That's why the wizard wouldn't move past the Emergency step. - Pressing **Siguiente** also marked the fields as "touched", which in Angular Material normally turns empty required fields red. - But our site-wide theme forced every field's border and label to the normal grey with `!important`, and never defined an "invalid" style. So the red was always painted over — on **every** form on the site, not just this one. - On top of that, the Emergency step had no error text under its fields, so there was no feedback at all. **What changed** (spikerj/spikersoft-angular#1408, merged) - **Theme:** invalid fields now get a red outline and a red label, site-wide, including while the field is focused. - **Child account wizard:** "Este campo es obligatorio" now appears under the required Emergency contact fields (name, relationship, phone), and an invalid-email message under email. The same "required" message was added to the passport fields and medication name. - The Health step's **Siguiente** now marks its fields as touched too, like the other steps. - A test now clicks Next with empty fields and checks that the errors appear. It will be live with the next deploy. **Reopen this** if a required field still gives no feedback.

spikerj added the bug label 2026-10-02 03:42:06 +00:00

spikerj closed this issue

2026-10-02 03:42:06 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1153