Build a small React component that validates whether a user’s input is a proper URL in real time.
This is useful in forms where users need to enter website links, API endpoints, or redirect URLs.
Things to do
- Create an input where the user can type a URL.
- Implement a validator function that follows these rules:
- The URL must start with http:// or https://.
- The hostname must either be: localhost (with or without a port), OR a domain containing at least one dot (e.g., example.com, abc.io, a.b).
- The URL must not contain any whitespace.
Show validation feedback:
- Display "Valid URL" in green if the input passes validation.
- Display "Invalid URL" in red if the input fails validation.
Examples
input: "https://example.com"
output: "Valid URL"
input: "example.com"
output: "Invalid URL"
input: "https://exa mple.com"
output: "Invalid URL"
input: "http://localhost:3000"
output: "Valid URL"
input: "ftp://example.com"
output: "Invalid URL"
Testing Instructions
Please use the following data-testid attributes in your React component:
- url-input → for the input field
- result → for the validation message
