Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancing Web Components Form Validation #1195

Closed
Marina-L-Stoyanova opened this issue May 13, 2024 · 1 comment · Fixed by #1254
Closed

Enhancing Web Components Form Validation #1195

Marina-L-Stoyanova opened this issue May 13, 2024 · 1 comment · Fixed by #1254

Comments

@Marina-L-Stoyanova
Copy link

Here is a sample that demonstrate the current way to implement Web Components form with validation: Web Components Validation

We should consider:

  1. In-Component Validation:

    Implement validation logic directly within the Web Components that can be used in a Form(igc-input, igc-textarea, igc-select and ect.). This approach encapsulates validation rules and keeps them self-contained.
    Validate input data as users interact with the form elements (e.g., on blur or input change events).

  2. Displaying Validation Messages:

    Show validation messages when input is invalid.

  3. Slot Considerations:

    Evaluate whether to use existing slots (like helper-text) or create a dedicated slot (e.g., validation-message) for displaying validation feedback. (Using a separate slot allows flexibility in styling and positioning validation messages.)

@Marina-L-Stoyanova Marina-L-Stoyanova added 🆕 status: new The issue is new and will be reviewed when somebody picks it up. feature labels May 13, 2024
@rkaraivanov rkaraivanov self-assigned this May 13, 2024
@rkaraivanov rkaraivanov added 👀 status: in-review and removed 🆕 status: new The issue is new and will be reviewed when somebody picks it up. labels May 13, 2024
@rkaraivanov
Copy link
Member

We should consider:

  1. In-Component Validation:

    Implement validation logic directly within the Web Components that can be used in a Form(igc-input, igc-textarea, igc-select and ect.). This approach encapsulates validation rules and keeps them self-contained.

This is already covered by the existing form associated components.

Displaying Validation Messages
Slot Considerations

This definitely merits further exploration and potential integration into the library. In my opinion, dedicating a distinct slot solely for error messages seems advantageous. We'll begin to consider these aspects and aim to have a preliminary implementation shortly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants