JSFiddle - React, Tailwind, and code Playground

by Ryan Eballar

HTML

<h1>How to create html5 validation for password confirm?</h1>
<hr>
<form>
    <label>Login:</label>
    <input type="text" name="login" id="login"/><br/>
    <label>Password:</label>
    <input type="password" name="pass" id="pass"/><br/>
    <label>Password Confirm:</label>
    <input type="password" name="pass_conf" id="pass_conf" data-equal-id="pass" /><br/>

    <input type="submit"/>
</form>

JavaScript

$('[data-equal-id]').bind('input', function() {
    var to_confirm = $(this);
    var to_equal = $('#' + to_confirm.data('equalId'));
    
    if(to_confirm.val() != to_equal.val())
        this.setCustomValidity('Password must be equal');
    else
        this.setCustomValidity('');
});