JSFiddle - React, Tailwind, and code Playground

by alessia_fachin

HTML

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

CSS

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

JavaScript

document.querySelector('form').addEventListener('input', function(evt){
    //faccio si che venga aggiunta classe per sottolineare input con errore
    document.forms[0].classList.add('dirty');
    var campi_uguali = document.forms[0].password.value === document.forms[0].ripetipassword.value;
    document.forms[0].ripetipassword.setCustomValidity(campi_uguali ? '' : 'i due campi non combaciano');  
}, false);

//mi posso mettere in ascolto (solo in capture perchè non fa bubbling) ull'elemento invalid e togliere il balloon pop up con errore

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);

//così com'è ora il testo di errore stampato si somma sempre perciò devo fare così per cancellarlo

document.querySelector('input[type=submit]').addEventListener('click', function(){
 error.innerHTML="";
}, false);