Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Add form validation styling for form fields #66

Closed
jackcmeyer opened this issue Oct 4, 2019 · 6 comments
Closed

Add form validation styling for form fields #66

jackcmeyer opened this issue Oct 4, 2019 · 6 comments
Labels
enhancement New feature or request help wanted Extra attention is needed released
Projects
Version 2.0
Milestone
v1.0.0

Comments

@jackcmeyer
Copy link
Member

jackcmeyer commented Oct 4, 2019 •
edited
Loading

馃殌 Feature Proposal

To display a form validation message/styling should be consistent across all form controls.

Motivation

Displaying success/errors for fields.

Example

Form validation.

https://react-bootstrap.netlify.com/components/forms/#forms-validation-native

Related

#62 #63 #64 #65 #33 #20
@jackcmeyer jackcmeyer added enhancement New feature or request help wanted Extra attention is needed labels Oct 4, 2019
@jackcmeyer jackcmeyer added this to To do in Version 2.0 via automation Oct 4, 2019
@fox1t
Copy link
Member

fox1t commented Oct 6, 2019

@irvelervel Can you provide any direction/best practice about this topic?

@adamdickinson
Copy link
Contributor

Happy to give this one a go! I'd like to follow React Bootstrap as a basis and try to help the look and feel as hospitalrun as possible. Is there a styleguide or any kind of branding guideline that I should lean on here?

@ocBruno
Copy link
Contributor

ocBruno commented Jan 1, 2020 •
edited
Loading

Hey @adamdickinson I thought i'd give this a go since I saw it's been inactive but if you're still working on this give me a heads up!

I'm searching for validation best practices and will try to focus more on the usability and design while avoiding inserting too much logic inside the components.

Is formik a viable option or would it require too much refactoring?
I was thinking using schemas as shown here might be a good validation technique.
https://react-bootstrap.github.io/components/forms/#forms-validation-libraries

@jackcmeyer Shall I implement this library or attempt to create something custom?

If anyone has any best practices, suggestions, or any requests I'm always looking for improvements and mistakes I might have overlooked!

@jackcmeyer
Copy link
Member Author

@ocBruno unless there is a compelling reason to not use the built in bootstrap validation styling, I think that we should use that.

@ocBruno
Copy link
Contributor

ocBruno commented Jan 7, 2020 •
edited
Loading

@ocBruno unless there is a compelling reason to not use the built in bootstrap validation styling, I think that we should use that.

Ah pardon me I got offtrack, I was thinking of another issue considering how to handle the validation. If anyone has any suggestions or feedback on the program and grafic design send me a reply!

Also this next commit I pushed I'm uncertain what is the ideal way to modify the style of the react bootstrap select component so I can add a margin to the exclamation mark if anyone has any ideas on the ideal pattern.

Currently working on improving the design of and styling the input components, and inserting custom validation messages.

@ocBruno ocBruno mentioned this issue Feb 9, 2020
Closed
@jackcmeyer jackcmeyer mentioned this issue Feb 20, 2020
Open
@matteovivona matteovivona added this to the v1.0.0 milestone Feb 20, 2020
Version 2.0 automation moved this from To do to Done Mar 15, 2020
ghost pushed a commit that referenced this issue Mar 18, 2020
@semantic-release-bot
chore(release): 1.0.0 [skip ci]
4cbe915 
# [1.0.0](v0.36.0...v1.0.0) (2020-03-18)

### Bug Fixes

* **coveralls:** fix typo ([9180d2f](9180d2f))
* **input:** add missing className and style properties ([3713d16](3713d16)), closes [#271](#271)
* **input:** add style to text input property and fix test ([595b709](595b709)), closes [#271](#271)
* **input:** add validation styling to text input and field ([ee3cd14](ee3cd14)), closes [#271](#271)
* **input:** fix validation tests ([67bab76](67bab76)), closes [#271](#271)
* **input:** replace selected with defaultValue in select ([c9656cd](c9656cd)), closes [#271](#271)
* **input:** resolve requested and other necessary changes and refactor ([c0ec7ab](c0ec7ab)), closes [#271](#271)
* **inputs:** apply requested changes ([45bcf23](45bcf23)), closes [#271](#271)
* **table:** fixes table tests ([beba7f1](beba7f1))
* **types:** add ColorVariant light and info colors ([6664de4](6664de4)), closes [#66](#66)
* insert missing property to TextInput ([fcbadca](fcbadca)), closes [#66](#66)

### Features

* **actions:** improves github action cicd and removes travis ([44cf335](44cf335))
* **docs:** removes unnecessary docs ([98110ce](98110ce))
* **input:** add input validation styles and tests, update react-bs ([262d87e](262d87e)), closes [#271](#271)
* **input:** add validation styling to select ([a791422](a791422)), closes [#271](#271)
* **inputs:** add datetimepicker input validation and create docs ([515db71](515db71)), closes [#271](#271)
* **inputs:** form validation progress ([d24435e](d24435e)), closes [#66](#66)
* **textinput:** add errorMessage property ([3648fba](3648fba)), closes [#66](#66)
* **textinput:** add valid input message, fix typos and others ([4c90b45](4c90b45)), closes [#66](#66)

### BREAKING CHANGES

* **input:** update react bootstrap
@ghost
Copy link

ghost commented Mar 18, 2020

馃帀 This issue has been resolved in version 1.0.0 馃帀

The release is available on:

Your semantic-release bot 馃摝馃殌

@ghost ghost added the released label Mar 18, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement New feature or request help wanted Extra attention is needed released
Projects
Version 2.0
  
Done
Milestone
v1.0.0
Development

Successfully merging a pull request may close this issue.

feat(inputs): add form validation style
5 participants
@adamdickinson @fox1t @matteovivona @jackcmeyer @ocBruno