JSFiddle - React, Tailwind, and code Playground

by Pavel Azanov

HTML

<script src="https://wyto.net/projects/jcv/jquery.csssr.validation.js"></script>
<form 
    id="frmRegister" 
    action="#" 
    method="post" 
    data-validate
    data-invalid-class="invalid">
    
    <input id="txtPassword" type="password" name="password" placeholder="Password" required />
    <input type="password" name="password2" placeholder="Confirm password" required data-equal-to="#txtPassword" />
    
    <input type="submit" value="register" />
</form>

CSS

* { padding: 0; margin: 0 }
form { padding: 20px }
input {
    margin-bottom: 5px;
    padding: 5px 10px;
    display: block;
    border: solid 1px lightgrey;
    outline: none;
}
input.invalid {
    border-color: red
}
input[type="submit"] {
    background: lightgrey;
}

JavaScript

$(function() {
    
    // Add a submit handler to prevent 
    // real form submission for test purposes
    $('#frmRegister').on('submit', function() {
        alert('I\'m valid and submitted!');
        
        return false;
    });
    
});