If you are not trying to validate while typing, then it will automatically show error after you submit it.

I’m trying to add an email input to my form in HTML5, but somehow it still allows me to write anything without @ and the other stuff that an email contains.

 <input class="form-control" type="email" id="email" name="email" required>

Also tried:

<input type="text" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/" class="form-control" id="email" name="email" required>

and still nothing happens if I write it incorrectly.