JSFiddle - React, Tailwind, and code Playground

by suns2015

HTML

Try to submit, the domain without "http://" would error. The pattern check is a secondary validation. Here the pattern is checking the naked domain as in <a href="https://stackoverflow.com/questions/58070841/pattern-in-html5-input-type-url-validation">stackoverflow thread</a>
<form>
<input type="url" 
  name="url"
  id="url"
  value="test.io"
  placeholder="https://example.com"
  pattern="(?:(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))(?::\d{2,5})?(?:\/[^\s]*)?"
  required>
  <input type="submit" />
</form>