JSFiddle - React, Tailwind, and code Playground

HTML

<form action="">
    <input type="text" id="username" name="logon" />
    <input type="password" id="password" name="password" />
    <textarea>olá</textarea>
    <select>
        <option value="a" name="A" >A</option>
    </select>
    <input type="hidden" name="realm" value="realm1" />
    <input type="submit" value="Click Me" />
</form>

JavaScript

$('form').on('submit', function () {
    
    var elems = $('form input:not([value]), input[name=""], select:empty, textarea:empty');
    
    var inputNames = [];
    elems.each(function (index, elem) {
        var value = elem.value;
        // Note que null == undefined
        if (value == null || value === '') {
            inputNames.push(elem.id || elem.name || 'field not named');
        }
    });
    alert(elems.length + ' empty fields from server ' +
          '\nFieldnames that are empty now: ' + inputNames.join(', '));
    return false;
});