hack4impact-uiuc / 7000-languages

Helping Indigenous communities around the world teach, learn and sustain their languages
GNU General Public License v3.0
12 stars 2 forks source link

Form Validation for Create Unit, Create Lesson, and Add Vocab Item modals #186

Closed ashayp22 closed 2 years ago

ashayp22 commented 2 years ago

Describe the bug We should validate the forms on the Create Unit, Create Lesson, and Add Vocab Item modals. We can do this by:

  1. Disabling the submit button (can gray out like on the Apply to Contribute page)
  2. Adding a * next to required fields

Check out client/src/pages/Apply for examples on how to do the form validation.

rustom commented 2 years ago

Are the validate() function and FormControl components in Apply.js necessary (and corresponding components I'd add to CreateUnit, etc.)? It seems sufficient to just disable the submit button by creating the areAllFilled bool and passing it to the Drawer component in CreateUnit.js, like this:

const areAllFilled = name !== '' && purpose !== ''

return (
    <Drawer
      titleText="Add Custom Unit"
      successText="Create Unit"
      successCallback={success}
      closeCallback={close}
      isDisabled={!areAllFilled}
      body={body}
    />
  )

The same can be done for lesson and vocab item.