JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="MainContent_Birthdate" aria-required="true" id="toto" onblur="checkValidity('toto', ' ', 'Le nom saisi est invalide&nbsp;!');" tabindex="0"/>

JavaScript

$(document).on("blur", "input[name=bMainContent_Birthdate]",
    function chkBirthday() {
        alert("Got it on blur");
    });
    
    function removeOldAlert()
    {
        var oldAlert = document.getElementById("alert");
        if (oldAlert)
            document.body.removeChild(oldAlert);
    }
  
    function addAlert(aMsg)
    {
        removeOldAlert();
        var newAlert = document.createElement("div");
        newAlert.setAttribute("role", "alert");
        newAlert.setAttribute("id", "alert");
        var msg = document.createTextNode(aMsg);
        newAlert.appendChild(msg);
        document.body.appendChild(newAlert);
    }
   
    function checkValidity(aID, aSearchTerm, aMsg)
    {
    alert("iiee");
        console.log("dans chekc");
        var elem = document.getElementById(aID);
        var invalid = (elem.value.indexOf(aSearchTerm) < 0);
        if (invalid) {
            elem.setAttribute("aria-invalid", "true");
            addAlert(aMsg);
        } else {
            elem.setAttribute("aria-invalid", "false");
            removeOldAlert();
        }
    }