JSFiddle - React, Tailwind, and code Playground

HTML

<p><em>First, submit the form to see the error.</em> (with the wrong values) Then, write a correct email on the first field. You'll see the red dotted line becomes green (thus is no longer ":invalid"), but there is no way to determine the field is valid again. Is there a way to monitor that change?</p>
<br />
<form action="javascript:alert('Form submitted')" novalidate>
    <label>Here you write an email like [email protected]</label>
    <div class="inputWrapper">
        <input type="email" value="wrongValue" id="tste">
    </div>
    <div class="inputWrapper">
        <input type="text">
    </div>
    <div class="inputWrapper">
        <input type="url" value="http://right.value">
    </div>
    <input type="submit" id="submit">
</form>

CSS

input, p, label {
    font-family: 'Segoe UI', Calibri, Helvetica, sans-serif;
}

em {
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 0 0 1px rgba(20,20,20,0.8);
}

input {
    background: rgba(200,250,220);
    border: 5px dotted #DDEEDD;
    width: 97.6%;
    padding: 0.2em;
}

input[type=submit] {
    width: 20%;
    margin: 1em auto;
    border: 1px solid black;
    background: #9A9;
    border-radius: 5px;
}


.inputWrapper {
    border: 4px solid #8EAF8A;
    margin: 0.5em;
    font-size: 0.8em;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(200,240,200,0.7);
    width:90%;
}

.inputWrapper.focus {
    border-color: #229944;
    box-shadow: 0 0 4px 4px rgba(50,250,70,0.7);
}

.inputWrapper.invalid {
    border-color: red;
    box-shadow: 0 0 4px 4px rgba(250,50,70,0.7);
}

input:focus {
    outline:none;
    border-color:#90FF80;
}

input:invalid{
    outline:none;
    border-color: #FF5E60;
}

JavaScript

$("input").focus(function() {
    $(this).parent().addClass("focus");
}).blur(function() {
    $(this).parent().removeClass("focus");
});

$("input").on('change', function(e) {
 		var input = e.target;
    $(this).checkValidity();
     if(input.validity.valid) {
        element.removeClass('invalid');
        element.parent().removeClass('invalid');
    } else {
        element.addClass('invalid');
        element.parent().removeClass('invalid');
    }
})

$("#submit").on('click', function(e) {
    $('#tste').checkValidity();
    if(input.validity.valid) {
        element.removeClass('invalid');
        element.parent().removeClass('invalid');
    } else {
        element.addClass('invalid');
        element.parent().removeClass('invalid');
    }
});


document.addEventListener('keyup', function(e){
    var input = e.target;
    if (!$.nodeName(input, 'input')) return;
    input.checkValidity();
    var element = $(input).parent();
    if(input.validity.valid) {
        element.removeClass('invalid');
        element.parent().removeClass('invalid');
    } else {
        element.addClass('invalid');
        element.parent().removeClass('invalid');
    }
});
// This seems to work only when submit button is pressed
document.addEventListener('invalid', function(e){
   var element = $(e.target).parent();
   element.addClass("invalid");
   element.parent().addClass("invalid");
}, true)
    
    // Maybe askinh in an interval if $(this) is valid on every input? :S