JSFiddle - React, Tailwind, and code Playground

by Abhishek Kumar

HTML

<form id="reportaproblem_form" class="rapf-form-wrapper">
    <div id="rapf_yourname" class="rapf-yourname-wrapper">
        <input name="yourname" type="text" placeholder="Your Name" maxlength="100" data-role="none" class="rapf-input" required>
            <div class="error hide"></div>
    </div>
    <div id="rapf_email" class="rapf-email-wrapper">
        <input name="email" type="email" placeholder="Email" maxlength="100" data-role="none" class="rapf-input" required>
        <div class="error hide"></div>
    </div>
        </form>
    <div id="konsole"></div>

JavaScript

$('form#reportaproblem_form div > input[required]').on('change', function(e){
    $('#konsole').html('>>' + e.target.name + '|' + e.target.value + '|' + typeof e.target.value + '|' + (e.target.value.replace(/^\s+/g, '').replace(/\s+$/g, '') === ''));
});