Add inline validation for group name on edit page

What does this MR do and why?

Follow-up to !239243 (merged) that extends the same inline group-name validation to the group general settings (edit) page (/groups/<group>/-/edit → General → Naming).

Because the edit page is a server-rendered HAML form (not the Vue-based create form), this MR adds a small vanilla-JS validator (group_name_validation.js) that reuses checkGroupNameRules from !239243 (merged) and wires it up via the edit-page entry point.

References

Relates to #597214 (closed)

Depends on: !239243 (merged) (this MR targets that branch; retarget to master after !239243 (merged) merges).

Screenshots or screen recordings

How to set up and validate locally

  1. Open /groups/<your-group>/-/edit → General → Naming, visibility in your browser.
  2. Verify error states:
    1. Clear Group name and submit → expect Group name is required. inline, form does not submit.
    2. Type -foo → expect inline format error.
    3. Type foo$bar → expect inline format error.
  3. Verify valid input shows no error and allows saving:
    1. Type My Group and save → expect successfully updated flash.
    2. Type 🚀 Rockets (emoji start) and save.
    3. Type _internal and save.
  4. Verify recovery:
    1. Type -bad, then clear the field → expect error disappears (and aria-invalid resets).
    2. Type -bad, then fix to bad → expect error disappears.
  5. Verify accessibility:
    1. With the field invalid, screen-reader users should hear the error text (linked via aria-describedby).
  6. Verify no regressions:
    1. Other settings on the page (description, visibility, etc.) save normally.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Shane Maglangit

Merge request reports

Loading
Loading