Email validation with HTML5 Required and regular expression

Hello! I'm using native HTML5 validation for an "email" field and it works fine! However, I would like to increase it to a specific case, where I do not want to accept emails with "free" domains (gmail, hotmail, etc.).

I did the regular expression and tested it and it worked correctly (Here you can take the test: link ). But by applying to the email field pattern, nothing happens.

How to proceed?

Pattern:

^([\w-.]+@(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$

Testing in the field

<form>
  <div class="field">
    <label for="email">Email Corporativo</label>
    	<input 
    	  type="email" 
    	  name="email" 
    	  id="email" 
    	  value="" 
    	  pattern="^([\w-.]+@(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$" 
    	  title="Utilize seu email corporativo" 
    	  placeholder="" 
    	  required
    	>
  </div>
  <input type="submit" value="ENVIAR">
</form>