JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    Username: <input type="text" name="usrname" required="required" /><br />
    Password: <input type="password" name="pw" id="pw" required="required" /><br />
    Confirm:  <input type="password" name="pwconfirm" id="pwconfirm" required="required" title="Please confirm your password." /><br />
    <input type="submit" value="Send" />
</form>

CSS

.input-invalid {
    border: 1px solid red;
}

JavaScript

(function(w, d, $){
    $(function(){
        $('#pwconfirm').on('validate', function(){
            // Simple test
            return $(this).val() === $('#pw').val();
        });
        
        $('form').submit(function( jqEvt ) {
            jqEvt.preventDefault();
            
            if( validate(this) ) {
                alert("Yay!");
                // Do the request!
                /*
                $.ajax({
                    url : ROOT_URL + $(this).attr('action'),
                    data : getFields(this),
                    dataType : 'json',
                    
                    success : function( result ) {
                        if( result.ok ) {
                            alert('Yay!');
                        }
                        else {
                            alert('Nay!');
                        }
                    }
                });
                */
            }
        });
    });
    
    function validate( form ) {
        var allValid = true;
    
        $('input[required][name], textarea[required][name]', form).each(function( index, elem ) {
            var $elem = $(elem),
                val = $elem.val(),
                pattern = $elem.attr('pattern'),
                regex = null,
                valid = true;
                
                // Keep the Event object, we'll need to check the result property.
                jqEvt = new $.Event('validate');
            
            console.log(jqEvt);
            $(this).trigger(jqEvt);
            
            // The last handler returned something!
            if( typeof jqEvt.result != 'undefined' ) {
                valid = !!jqEvt.result;
            }
            else {
                // Validation pattern provided?
                if( typeof pattern !== 'undefined' && pattern !== false ) {
                    regex = new RegExp(pattern);
                }
        
                // Validation through pattern
                // For minimum...