Problems

• Error handling

I was using <input type='text'> for my inputs because I was lazy to fiddle with the css for number inputs to remove the arrow buttons. However, I do not know how to validate my input before submitting.

If I had used number inputs, I could have set min and max attributes to validate my input was in range before the submit happens, but I couldn't do the same thing for text inputs.

My crappy workaround was to alert the errors on the submit handler. How do I validate the inputs in this case. Is there an event which checks for valid inputs before the submit?

• Input width

I tried using flexbox to style my input fields, but received a problem. <input> only responded to width: 100% and not max-width: 100% which confused me

And a more general problem, I do not know how to make my inputs fill up the container. In mobile view, even though there is remaining space on the sides of my component, the <input> gets squashed instead of expanding the component to the fullest. Not sure what the general method to handle this is.

Any help is appreciated!