Add inline validation for group name field

What does this MR do and why?

Adds inline validation to the group name field on the group creation form (Vue-based GroupNameAndPath component) with granular error messages that identify specific rule violations (start character or allowed character set).

Validation runs as users type, providing immediate feedback instead of waiting for form submission.

This MR has been split for easier review:

  • This MR — inline name validation on the group creation form (/groups/new).
  • Follow-up !243038 (merged) — inline name validation on the group general settings (edit) page (/groups/<group>/-/edit).

References

Relates to #597214 (closed)

Follow-up: !243038 (merged)

Screenshots or screen recordings

How to set up and validate locally

  1. Open /groups/new#create-group-pane in your browser.
  2. Verify error states:
    1. Leave Group name empty and submit → expect Group name is required.
    2. Type -foo → expect inline format error.
    3. Type foo$bar → expect inline format error.
  3. Verify valid input shows no error:
    1. Type My Group.
    2. Type 🚀 Rockets (emoji start).
    3. Type _internal.
  4. Verify recovery:
    1. Type -bad, then clear the field → expect error disappears.
    2. Type -bad, then fix to bad → expect error disappears.
  5. Reload the page and don't touch the name field → expect no error until submit.
  6. Verify no regressions:
    1. Edit the Group URL/path field with invalid input → expect its own validation still works.
    2. On EE, visit /-/subscriptions/groups/new and confirm the subscription group selector's name validation still behaves as before.

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