JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<form id="newsletter_form" class="form" role="form" name="newsletter_form" method="post" action="<?= $form_action ?>" autocomplete="off">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            [email protected]<br/>
            <input type="email" class="form-control" name="email" id="email" value="" maxlength="250" placeholder="email" aria-required="true" required="required" />
        </div>
        <br/><br/>
        [email protected]
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <input type="password" class="form-control" name="password" id="password" value=""   aria-required="true" required="required" />
        </div>
    </div>
    <input type="submit" class="btn submit btn-default" value="submmit!" />
</form>

JavaScript

$('form #email').on('change valid invalid', function () {
    this.setCustomValidity('');
    if (!this.validity.valid) {
        this.setCustomValidity("custom email invalid");
    }
});
$('form #password').on('change valid invalid', function () {
    this.setCustomValidity('');
    if (!this.validity.valid) {
        this.setCustomValidity("custom error message");
    } else if ($("#email").val() != this.value) {
        this.setCustomValidity("test now working");
    }
});