JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<form>
Password: <input type="password" name="password" required><br/>
Ripeti password: <input type="password" name="ripeti_password"><br/>
<input type="submit" id="submit" value="invia">
</form>

CSS

input:invalid{
    border: 3px solid red;
}

JavaScript

var pass1 = document.querySelector('input[name=ripeti_password]');
var pass2 = document.querySelector('input[name=password]');

pass1.addEventListener('input', function(){
    if(pass1.value === pass2.value){
        pass1.setCustomValidity('');
    }else{
        pass1.setCustomValidity('the passwords must match');
    }
    console.log(pass1.valid());
}, false);