JSFiddle - React, Tailwind, and code Playground

by beatricevivaldi

HTML

<form>
    <input name="password" type="text" required placeholder="password"><br/>
    <input name="ripeti_password" type="text"  placeholder="ripeti password"><br/>
    <input type="submit">
</form>

CSS

.dirty input[type=text]:invalid{
    border: 2px solid red;
}

JavaScript

//document.querySelector('input').setCustomValidity('Campo non valido');

document.querySelector('form').addEventListener('input', function(evt){
    document.forms[0].classList.add('dirty');

    var campi_uguali = document.forms[0].password.value === document.forms[0].ripeti_password.value;
    document.forms[0].ripeti_password.setCustomValidity(
        campi_uguali ? '' : 'i due campi non combaciano'
    );
}, false);

document.querySelector('form').addEventListener('invalid', function(evt){
    for(var x = 0; x < document.forms[0].elements.length; x++);
    evt.preventDefault();
}, true);