JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<div>
    <input id="input" type="text"><button>Click</button>
    <div class="message">Incorrect</div>
    <div>
        <button>Click</button>
    </div>
</div>

CSS

input:not(:valid) ~ .message {
    border: 1px solid red;
    display: block;
}

.message {
    display: none;
}

JavaScript

$('input').on('change', function() {
    if(this.value !== 'aa') {
        this.setCustomValidity('yohay');
    } else {
        this.setCustomValidity('');
    }
});

$('button').on('click', function() {
    alert('dima');
});