Fix validation feedback for workspace modals with required fields in tabs #21413

Back

Description

When saving a workspace without filling required fields in the second tab (Provider, ModelName), no validation feedback was shown. The form appeared unresponsive with no indication of what needed to be fixed.

Changes:

  • Added form validation handler to workspace create/edit modals that:

    • Intercepts submission, checks HTML5 validation state
    • Switches to tab containing first invalid field
    • Focuses invalid field and shows localized toast: "Please correct the errors from all tabs and try again"
    • Applies Bootstrap .was-validated class for visual field highlighting

  • Added PleaseCorrectTheErrorsFromAllTabsAndTryAgain localization string

  • Fixed localization issue where error message was displaying as raw key instead of translated text

Files modified:

  • createModal.js - added initializeFormValidation() function and fixed localization key
  • editModal.js - applied same validation handler for consistency and fixed localization key
  • en.json - new error message string

Checklist

  • I fully tested it as developer / designer and created unit / integration tests
  • I documented it (or no need to document or I will create a separate documentation issue)
  • I worked with the design team to get their idea for UI/UX design (or no need to design for this PR)
  • I've assigned reviewer, related labels and set a milestone for this PR

How to test it?

  1. Open workspace create modal
  2. Fill only "Name" in Basic Information tab
  3. Click Save without visiting Provider tab
  4. Expected: Modal switches to Provider tab, shows localized toast notification "Please correct the errors from all tabs and try again", highlights empty required fields (Provider, ModelName)
  5. Test same flow with edit modal
  6. Verify error message is properly localized and not displaying as raw key
Original prompt

This section details on the original issue you should resolve

<issue_title>MVC - No Feedback When Saving New Workspace Without Filling Required Fields in Second Tab</issue_title>
<issue_description>MVC - 10.0.2
When creating a new Workspace, if the required fields in the second tab are not filled and the Save button is clicked, nothing appears to happen. Instead, the required fields in the second tab should be highlighted or a warning message should be displayed to inform the user.

https://github.com/user-attachments/assets/d5cc73f0-1a0e-4327-8351-c5168836b4fb

  • Template: app-nolayers
  • Created ABP Studio Version: 2.1.4
  • Current ABP Studio Version: 2.1.4
  • Multi-Tenancy: Yes
  • UI Framework: mvc
  • Theme: leptonx
  • Theme Style: system
  • Theme Menu Placement: side
  • Database Provider: ef
  • Database Management System: postgresql
  • Social Login: Yes
  • Include Tests: Yes
  • Use Local References: No
  • Optional Modules:
    • GDPR
    • FileManagement
    • TextTemplateManagement
    • LanguageManagement
    • AuditLogging
    • Chat
    • OpenIddictAdmin
  • Selected Languages:
    English, Arabic, Chinese (Simplified), Chinese (Traditional), Czech, English (United Kingdom), Finnish, French, German (Germany), Hindi , Hungarian, Icelandic, Italian, Portuguese (Brazil), Romanian (Romania), Russian, Slovak, Spanish, Swedish, Turkish
  • AI Management Enabled: Yes
  • Selected AI Providers:
    Ollama, OpenAI
  • Default Language: English
  • Create Command: abp new AbpSolution875771046 -t app-nolayers --ui-framework mvc --mobile --database-provider ef --database-management-system postgresql --theme leptonx --skip-migration --skip-migrator --without-cms-kit --sample-crud-page --dont-run-install-libs --dont-run-bundling -chat -file-management
    </issue_description>

<agent_instructions>Check modal javascripts and validations from DTO and find a proper solution like one of them:

  • Show a toast about there are some validation errors
  • Navigating to antoher tab if validation error on that tab (not suitable when 2 tabs have validation errors at the same tab)

As an entry point you can start with this modal:

abp/ai-management/src/Volo.AIManagement.Web/Pages/AIManagement/Workspaces/CreateModal.cshtml

</agent_instructions>

Comments on the Issue (you are @copilot in this section)

  • Fixes volosoft/volo#21400

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Version
10.1.0-rc.2
Release Date
22 January, 2026
Labels
abp-module-ai-management ui-mvc
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.