JSFiddle - React, Tailwind, and code Playground

by Stefano Bertoli

HTML

<form><p id="errors"></p><input type="text" name="psw" required placeholder="psw"><br>
    <input type="text" name="rpsw" required placeholder="ripeti psw"><br>
        <input type="submit">
    
</form>

CSS

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

JavaScript

document.querySelector('form').addEventListener('input',
function(evt){
    document.forms[0].classList.add('dirty');
var cfr=document.forms[0].psw.value === document.forms[0].rpsw.value; document.forms[0].rpsw.setCustomValidity(cfr ? '' : 'campi diversi');
 },false);
var error=document.querySelector("#errors");
document.querySelector('form').addEventListener('invalid',function(evt){
    error.insertAdjacentHTML('beforeend',evt.target.name+': '+evt.target.validationMessage+'<br>');
     evt.preventDefault();
},true);
document.querySelector('input[type=submit]').addEventListener('click',function(){error.innerHTML="";
                                                              },false);