Mir Mubashshir• 90
@mmubashshir
Posted
Hi,
Answering your question use a span below each of those input fields and hide them using display none.
- You can first check if inputs are empty, if not using DOM, style the element as red and now unhide the span element with text "The fields is required"
- If they are not empty, you can check for validation, and if invalid you can do similar job with DOM to show invalid states
- Lastly, only run the function to calculate the age , if they are not empty and if they are valid
Good job done with responsiveness for mobile, couple of things to note
- Firstly, with this type of designs don't initialize a definite height, so whenever you shift to mobile size the height is automatically is adjusted.
- And giving an overall padding on all sides will take care of spacing on the bottom.
- center alignment, I think was not required, reducing width along with screen size does the job
- You could use input type="number" which wont take any text into consideration
- Using flex and gap between those elements is a good one
Congratulations, keep it up buddy 😊
0
JWord• 140
@jwren4170
Posted
@mmubashshir, Thanks for responding. I thought about using number type on inputs, but looking at the design(jpgs) I didn't think they had used them that way. So I wanted to stay as close to that as possible.
I'm not sure what you mean about the validation? I'm trying to add reset form functionality, but when I do, yes the input values are cleared but the validation styling doesn't go away. And if you try to enter new values, wrong ones, you get the error styling, but not the message.
0
