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

Improve validation support for NumberFieldEntry #206

Closed
Skaiir opened this issue Jan 12, 2023 · 1 comment · Fixed by #213
Closed

Improve validation support for NumberFieldEntry #206

Skaiir opened this issue Jan 12, 2023 · 1 comment · Fixed by #213
Labels
enhancement New feature or request

Comments

@Skaiir
Copy link
Contributor

Skaiir commented Jan 12, 2023

Is your feature request related to a problem? Please describe

Currently, dealing with number fields can be a little bit confusing. While there is browser built-in validation for number fields, how it is displayed is browser dependent and at least in Firefox requires a hover on top of the field, which is pretty hard to find.

image

I don't think there exists a way to pipe the validation errors through to the UI via code (I could be wrong), though I know that via CSS we can at least apply some styling rules if the field is invalid, this might be useful. But in practice, I'd still rather have a similar validation experience as with the regular text fields.

Describe the solution you'd like

Allow the supplying of a validation function for the NumberFieldEntry component, mirroring how it is done for TextFieldEntry.

Describe alternatives you've considered

Rely solely on browser default validation, unfortunately, the way browsers do this lacks a bit of clarity

Additional context

Initial comment that shows the confusion people experience with this: bpmn-io/form-js#490 (review)

@nikku @philippfromme I'm happy to implement this myself, if you think this is a positive addition.

@philippfromme
Copy link
Contributor

I think we should ignore the browser validation as it's essentially useless. Would be great to have an attribute like novalidate for number inputs.

We should

  1. be able to add a validate function to a number field (similar to the text field https://github.com/bpmn-io/properties-panel/blob/main/src/components/entries/TextField.js#L99)
  2. show validation errors below the number field
  3. only commit if valid

@marstamm marstamm added the backlog Queued in backlog label Jan 18, 2023
@fake-join fake-join bot closed this as completed in #213 Jan 20, 2023
fake-join bot pushed a commit that referenced this issue Jan 20, 2023
@bpmn-io-tasks bpmn-io-tasks bot removed the backlog Queued in backlog label Jan 20, 2023
Skaiir added a commit that referenced this issue Feb 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants