feat: default form validation rules applicable to selector components

[imdap]

Description

适用于Select, Radio, DatePicker等选择功能组件的默认表单校验规则

before:

after:

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Checklist

ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules in CONTRIBUTING.

• If you introduce new functionality, document it. You can run documentation with pnpm run docs:dev command.
• Run the tests with pnpm test.
• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• New Features

  • Introduced a new validation rule, selectRequired, to ensure mandatory selections in forms.
  • Added localized error messages for the selectRequired rule in both English and Chinese.

• Bug Fixes

  • Updated validation rules for various form components to utilize the new selectRequired logic, enhancing user guidance.

• Documentation

  • Enhanced validation framework documentation to reflect the new selectRequired rule and its usage.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3dd383c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

The changes introduce a new validation function named selectRequired across multiple form adapter files, ensuring that a selection is mandatory for various form components. This function checks if a value is undefined or null and returns a localized error message if the check fails. Additionally, the validation message for this requirement has been added to localization files in both English and Chinese. The validation rules for several form components have also been updated to utilize selectRequired, refining the validation logic for user inputs.

Changes

Files	Change Summary
apps/web-antd/src/adapter/form.ts, apps/web-ele/src/adapter/form.ts, apps/web-naive/src/adapter/form.ts, playground/src/adapter/form.ts	Added a new validation function selectRequired(value, _params, ctx) in setupVbenForm to check for undefined or null values, returning a localized error message if the check fails.
packages/@core/ui-kit/form-ui/src/types.ts	Introduced selectRequired as a new validation rule type in FormSchemaRuleType and updated VbenFormAdapterOptions interface to include an optional method for custom validation logic.
packages/locales/src/langs/en-US.json, packages/locales/src/langs/zh-CN.json	Added new localized validation messages for selectRequired in both English ("Please select {0}") and Chinese ("请选择{0}").
playground/src/views/examples/form/rules.vue	Updated validation rules for multiple form components from 'required' to 'selectRequired', enhancing the specificity of validation logic. A new range picker component was also introduced with the same validation rule.

Poem

In fields of forms, a rule takes flight,
To guide our choices, shining bright.
"Select required," it gently sings,
A prompt for options, oh, what joy it brings!
With messages clear, in tongues we share,
A rabbit's wish for choices fair! 🐰✨

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between a634ec3 and 3dd383c.

Files selected for processing (8)

• apps/web-antd/src/adapter/form.ts (1 hunks)
• apps/web-ele/src/adapter/form.ts (1 hunks)
• apps/web-naive/src/adapter/form.ts (1 hunks)
• packages/@core/ui-kit/form-ui/src/types.ts (2 hunks)
• packages/locales/src/langs/en-US.json (1 hunks)
• packages/locales/src/langs/zh-CN.json (1 hunks)
• playground/src/adapter/form.ts (1 hunks)
• playground/src/views/examples/form/rules.vue (4 hunks)

Additional comments not posted (14)

apps/web-ele/src/adapter/form.ts (1)

81-86: LGTM!

The selectRequired validation function is correctly implemented and enhances the form validation logic by ensuring that a selection is mandatory. The function checks if the value is undefined or null and returns a localized error message if the validation fails, providing a user-friendly experience. The function is correctly defined within the defineRules object of the setupVbenForm function, making it available for use in form validation rules.

apps/web-naive/src/adapter/form.ts (1)

90-95: LGTM!

The selectRequired validation function is a valuable addition to the form validation logic. It correctly handles the case when the value is either undefined or null, and returns a localized error message utilizing the context's label for specificity. This enhances the user experience by providing clear feedback when a selection is required.

The function is also correctly integrated within the setupVbenForm configuration, ensuring that it can be utilized by the form components.

apps/web-antd/src/adapter/form.ts (1)

106-111: LGTM!

The selectRequired validation function is implemented correctly and aligns with the PR objective of introducing default form validation rules for selector components. It enhances the form validation logic by ensuring that a selection is mandatory, thereby improving user input handling.

playground/src/adapter/form.ts (1)

106-111: LGTM! This is a valuable addition to the form validation logic.

The selectRequired function correctly checks for invalid selections (undefined or null) and returns a localized error message using the context's label for clarity. This aligns with the PR objectives of introducing default form validation rules for selector components.

Benefits:

• Improves user input handling and form integrity by ensuring that a selection is made.
• Enhances the user experience by providing localized error messages.

Great work!

playground/src/views/examples/form/rules.vue (6)

123-123: LGTM!

The validation rule for the RadioGroup component has been updated to 'selectRequired', which aligns with the validation logic applied to the Select component. This promotes consistency in validation requirements across the form.

---

142-142: LGTM!

The validation rule for the CheckboxGroup component has been updated to 'selectRequired', which aligns with the validation logic applied to other selection-based components. This promotes consistency in validation requirements across the form.

---

153-153: LGTM!

The validation rule for the Checkbox component has been updated to 'selectRequired', which aligns with the validation logic applied to other selection-based components. This promotes consistency in validation requirements across the form.

---

160-161: LGTM!

The validation rule for the DatePicker component has been updated to 'selectRequired', which aligns with the validation logic applied to other selection-based components. This promotes consistency in validation requirements across the form.

---

162-167: LGTM!

The new RangePicker component has been added to the form schema with the validation rule 'selectRequired'. This aligns with the validation logic applied to other selection-based components and promotes consistency in validation requirements across the form.

---

105-105: Verify the definition and behavior of the 'selectRequired' rule.

The validation rule for the Select component has been changed to 'selectRequired', which is not a standard rule provided by the form library. Ensure that:

1. The 'selectRequired' rule is defined correctly elsewhere in the codebase.
2. The behavior of the rule aligns with the intended validation logic for the Select component.

Run the following script to verify the rule definition:

Verification successful

---

The 'selectRequired' rule is correctly defined and properly used.

The 'selectRequired' validation rule is well-implemented and consistently used across the codebase. Key findings:

1. The rule is defined in multiple adapter files (playground, web-naive, web-ele, web-antd) with consistent implementation.
2. It checks for undefined or null values, which is appropriate for select-type inputs.
3. The rule uses a translation function for localized error messages.
4. It's correctly applied to various select-type components in the form definition.
5. The rule is included in the type definitions, indicating it's a standard part of the form validation system.

The change from 'required' to 'selectRequired' for the Select component is valid and aligns with the codebase's validation practices.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the definition of the 'selectRequired' rule.

# Test: Search for the rule definition. Expect: A clear and correct definition.
rg --type typescript -A 5 $'selectRequired'

Length of output: 77

---

Script:

#!/bin/bash
# Description: Search for the 'selectRequired' rule definition across .vue, .js, and .ts files

# Find all .vue, .js, and .ts files and search for 'selectRequired' within them
fd -e vue -e js -e ts | xargs rg -n -C 5 'selectRequired'

Length of output: 8982

packages/@core/ui-kit/form-ui/src/types.ts (2)

61-61: LGTM!

The addition of the selectRequired rule type to the FormSchemaRuleType union type is a valid change. It enables the usage of the selectRequired rule for form field validation, specifically for select fields that require a value to be selected.

---

327-331: LGTM!

The addition of the optional selectRequired method to the VbenFormAdapterOptions interface is a valid change. It allows defining custom validation logic for the selectRequired rule, enabling developers to specify their own conditions for determining if a select field value is valid. The method signature is consistent with other validation rule methods in the interface, and the return type of boolean or string is appropriate.

packages/locales/src/langs/zh-CN.json (1)

58-59: LGTM! The new validation message enhances the localization.

The addition of the selectRequired validation message in Chinese complements the existing required message nicely. It provides a specific prompt for selection inputs, guiding users with precise feedback. The message follows the same pattern as the existing localization and should integrate seamlessly.

packages/locales/src/langs/en-US.json (1)

58-59: LGTM!

The new selectRequired validation message:

• Complements the existing required message for input fields.
• Uses a placeholder {0} for the field name, allowing reuse across different select fields.
• Is grammatically correct and follows the existing message format.
• Provides clear guidance to users about the selection requirement.
• Will enhance the user experience by giving specific feedback for missed selections.
• Promotes consistency by enabling the same message to be used for different select fields.

Great addition! No issues found.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  -- I pushed a fix in commit <commit_id>, please review it.
  -- Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  -- @coderabbitai generate unit testing code for this file.
  -- @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  -- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  -- @coderabbitai read src/utils.ts and generate unit testing code.
  -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  -- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.