feat(gnoweb): support required attribute for markdown form fields

[moonia]

Description

Closes #4970
This PR adds support for the required="true" attribute in Gno-flavored markdown form fields.

Usage

• required="true" can be added to: <gno-input>, <gno-textarea>, <gno-select>
• Required fields: display a * indicator next to the label

<gno-form>
    <gno-textarea name="bio" required="true" />
</gno-form>

Preview

[Gno2D2]

🛠 PR Checks Summary

All Automated Checks passed. ✅

Manual Checks (for Reviewers):

• IGNORE the bot requirements for this PR (force green CI check)
• The pull request description provides enough details

Read More

🤖 This bot helps streamline PR reviews by verifying automated checks and providing guidance for contributors and reviewers.

✅ Automated Checks (for Contributors):

🟢 Maintainers must be able to edit this pull request (more info)
🟢 Changes related to gnoweb must be reviewed by its codeowners
🟢 Pending initial approval by a review team member, or review from tech-staff

☑️ Contributor Actions:

1. Fix any issues flagged by automated checks.
2. Follow the Contributor Checklist to ensure your PR is ready for review.
   • Add new tests, or document why they are unnecessary.
   • Provide clear examples/screenshots, if necessary.
   • Update documentation, if required.
   • Ensure no breaking changes, or include BREAKING CHANGE notes.
   • Link related issues/PRs, where applicable.

☑️ Reviewer Actions:

1. Complete manual checks for the PR, including the guidelines and additional checks if applicable.

📚 Resources:

• Report a bug with the bot.
• View the bot’s configuration file.

Debug

Automated Checks

Maintainers must be able to edit this pull request (more info)

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 The pull request was created from a fork (head branch repo: moonia/gno)

Then

🟢 Requirement satisfied
└── 🟢 Maintainer can modify this pull request

Changes related to gnoweb must be reviewed by its codeowners

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 A changed file matches this pattern: ^gno.land/pkg/gnoweb/ (filename: gno.land/pkg/gnoweb/frontend/css/06-blocks.css)

Then

🟢 Requirement satisfied
└── 🟢 Or
    ├── 🔴 Or
    │   ├── 🔴 And
    │   │   ├── 🔴 Pull request author is user: alexiscolin
    │   │   └── 🔴 This user reviewed pull request: gfanton (with state "APPROVED")
    │   └── 🔴 And
    │       ├── 🔴 Pull request author is user: gfanton
    │       └── 🟢 This user reviewed pull request: alexiscolin (with state "APPROVED")
    └── 🟢 And
        ├── 🟢 Not (🔴 Pull request author is user: alexiscolin)
        ├── 🟢 Not (🔴 Pull request author is user: gfanton)
        └── 🟢 Or
            ├── 🟢 This user reviewed pull request: alexiscolin (with state "APPROVED")
            └── 🔴 This user reviewed pull request: gfanton (with state "APPROVED")

Pending initial approval by a review team member, or review from tech-staff

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 Not (🔴 Pull request author is a member of the team: tech-staff)

Then

🟢 Requirement satisfied
└── 🟢 If
    ├── 🟢 Condition
    │   └── 🟢 Or
    │       ├── 🟢 User notJoon already reviewed PR 4974 with state APPROVED
    │       ├── 🟢 At least 1 user(s) of the team tech-staff reviewed pull request
    │       └── 🔴 This pull request is a draft
    └── 🟢 Then
        └── 🟢 Not (🔴 This label is applied to pull request: review/triage-pending)

Manual Checks

**IGNORE** the bot requirements for this PR (force green CI check)

If

🟢 Condition met
└── 🟢 On every pull request

Can be checked by

• Any user with comment edit permission

The pull request description provides enough details

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 Not (🔴 Pull request author is a member of the team: core-contributors)
    └── 🟢 Not (🔴 Pull request author is user: dependabot[bot])

Can be checked by

• team core-contributors

[codecov]

Codecov Report

❌ Patch coverage is 90.47619% with 6 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
gno.land/pkg/gnoweb/markdown/ext_forms.go	90.47%	6 Missing ⚠️

📢 Thoughts on this report? Let us know!

[Davphla]

LGTM, required field are also enforced when there's no input value.
/!\ CI is not passing

[notJoon]

The required flag only controls whether the required attr is added or not, and all other user unputs are properly handled with HTMLEscapeString, so there doesn't appear to be any injection threat in this PR. LGTM

EDIT: Some CIs are failing now. could you check this if possible? thank you

[jeronimoalbi]

Maybe required form fields could be parsed to render with the required attribute, that way forms would get basic default browser validation on submit click, if it makes sense

[alexiscolin]

The feature looks useful! However I have a few points before merging:

• I assume we're fully relying on browser's native HTML5 validation (blocks submission + shows default tooltip). This approach supports front-end minimalism which is what we want, and I don't see any JS changes so just confirming thats the intended scope?
@jeronimoalbi it already does that what should block the onSubmit JS event.
• I noticed there's no new tests included in the PR. Since this modifies the markdown parser logic in ⁠ext_forms.go, could you add a test case (eg a ⁠.txtar goldenfile) to verify that the ⁠required attribute is correctly rendered in the HTML output for all the field types the form can generate (input, textarea, select, radio, checkboxes etc)?

• Would be great to add a concrete example in ⁠r/demo/markdown or similar to demonstrate the syntax and verify it works as expected live across browsers (for input, textarea, select, radio, checkboxes etc).

• Native validation handles the blocking but browser styling for invalid fields varies alot (Chrome doesn't outline in red by default for ex). Did you consider adding CSS rules like the ⁠:invalid pseudo-class (maybe combined with ⁠:focus or ⁠:user-invalid) to style the input border in red when a required field is empty after user interaction? This would make the error state more consistant across browsers and improve UX.

• Currently only an asterisk ⁠* is displayed. While common, it may not be clear to every user what it means. Could you add a small explicit text like "required" or "(required)" after the field label, or at least a legend at the top of forms explaining what ⁠* means?

Thanks!

[moonia]

• Currently only an asterisk ⁠* is displayed. While common, it may not be clear to every user what it means. Could you add a small explicit text like "required" or "(required)" after the field label, or at least a legend at the top of forms explaining what ⁠* means?

45f8c3b, is it more explicit?

preview:

[moonia]

• I noticed there's no new tests included in the PR. Since this modifies the markdown parser logic in ⁠ext_forms.go, could you add a test case (eg a ⁠.txtar goldenfile) to verify that the ⁠required attribute is correctly rendered in the HTML output for all the field types the form can generate (input, textarea, select, radio, checkboxes etc)?

c7a7aa9

[alexiscolin]

Hey! These latest commits add CSS styling for native form validation (red border when a required field is invalid after user interaction). I also fixed the (required) badge display logic: spaces and for radios it shows in the description above the group (since validation applies to the whole group), while for checkboxes it shows next to each individual checkbox (since in native HTML, each required checkbox must be checked separately).
I Added golden file tests covering required on all field types and updated the markdown documentation with examples.

I want to test this locally before merging to make sure the behavior works correctly across different browsers.