Add Form Validation and Active/Disabled "Action" Buttons

[ryanwiemer]

Add form validation that would prevent a user from advancing to the "preview" if fields are missing or invalid. This would also activate or disable the actionable buttons such as "Preview" or "Print"

Possible frameworks to investigate:

https://github.com/christianalfoni/formsy-react

[chrisheninger]

Template for deciding how we want to validate each field... we can edit this post and comment below!

people
        name: Text, Required, (Max length?)
        email: Reg-ex email, Required
        phone: Number, Input-mask (###) ###-####, Required

summary: Text, Required, (Max length?)

rentalHistory
        address1: Text, Required, (Max Length?)
        address2: Text, (Max Length?)
        city: Text, Required, (Max Length?)
        state: Text, Select input, Required
        zip: Number, Input-mask #####, Required
        dateStart: Date, Required
        dateEnd: Date, Conditionally Required (isCurrentlyRenting)
        isCurrentlyRenting: Bool, Conditionally Required (dateEnd)
        reason: Text, Required, (Max Length?)

employmentHistory
        company: Text, Required, (Max Length?)
        title: Text, Required, (Max Length?)
        dateStart: Date, Required
        dateEnd: Date, Conditionally Required (isCurrentlyEmployed)
        isCurrentlyEmployed: Bool, Conditionally Required (dateEnd)

income: Number, Required (?)

[chrisheninger]

That's my first pass at the validation. ☝️

I could use your help knowing what the best max-length for the open-ended text inputs should be. Obviously we don't want it to be too short to accidentally cause anyone harm (Christopher Heninger is a long name and gets chopped off by inputs sometimes)... but we don't want 1000 character names ruining the formatting of the print view. If you could plug in some long names and decide how the CSS will wrap/line-height multilines and what is reasonable and what is not that would be perfect.

I think we disagree with the income being a required field... I think that there are plenty of people who would feel uncomfortable sharing that information upfront, and in a web form, even if it is all client-side data. I'd hate for someone who doesn't want to type in their income to not be able to generate a resume.

Any other spots you see that I may have missed?