JSFiddle - React, Tailwind, and code Playground

HTML

<form id="test2">
<p class="c">
<label>Entrez une adresse e-mail du <a href="http://groland.com">Groland</a> (.grd)<br />
please enter an e-mail address with .grd TLD<br />
<input  id="test3" type="email" required="required" /></label>
<button type="reset">Effacer</button>
<button type="submit">Valider</button>
</p>
</form>

JavaScript

window.addEventListener('load',function()
{
  var ceform = document.getElementById('test2');
  var ceinput = document.getElementById('test3');
  function interactif()
  {
      // revenir au mode interactif des messages d'erreurs du navigateur
      // going back to the interactive mode of the browser for error messages
  }

  ceform.addEventListener('submit',function(e)
  {
      // cavalier, mais je fais vite
      // fast is dirty
    ceinput.setCustomValidity('');
    // je teste la validité du formulaire
    // trying the natural validity of the form
    if (ceform.checkValidity())
    {
      // le formulaire est valide
      // form is valid
      // on crée donc notre propre gestionnaire complémentaire de validation
      // so i create there my own complementary validation service
      // ici, je fais simple, mais cela peut être un appel XHR, etc…
      // a simple example, but it can be an XHR action
      if (!/\.grd$/.test(ceinput.value))
      {
        ceinput.setCustomValidity('Groland Telecom ne permet d\'utiliser que les adresses e-mails du Groland.');
        interactif();
        // j'annule la soumission du formulaire, puisqu'il est faux
        // not valid, so i'm canceling the action there.
        e.preventDefault();
      }
    }
  },false);
  ['change','click','keypress'].forEach(function(ev)
  {
    // on efface le message d'erreur sur tout événement susceptible de changer cet élément
    // i'm removing the error message on any event able to change the value of this tag
    ceinput.addEventListener(ev,function(e)
    {
      ceinput.setCustomValidity('');
    },false);
  });
},false);