为何无法同时为多个类的textarea元素触发验证逻辑？

我希望validate_empty_field函数能同时作用于.log和.log2两个类的textarea元素，但目前仅.log类的元素能触发验证，.log2类的textarea无响应。需求为：点击textarea时，若任一或两个textarea为空，均需显示验证错误提示。

原代码如下：

JavaScript 代码 #

$(document).ready(function() {

    $('#field-warning-message').hide();
    $('#dob-warning-message').hide();

    var empty_field_error = false;
    var dob_error = false;
//    $('input[type=text], textarea')
    $('.log, .log2').focusout(function () {
        validate_empty_field();
    });

    function validate_empty_field() {
        var field = $('.log, .log2, textarea').val();
//        var first_name_regex = /^[a-zA-Z ]{3,15}$/;
        if (field.length == '') {
            $('#field-warning-message').show();
            $('#field-warning-message').html("Please fill out form!");
            empty_field_error = true;
        } else if (field.length < 1) {
            $('#field-warning-message').show();
            $('#field-warning-message').html("Please fill out form!");
            empty_field_error = true;
        } else {
            $('#field-warning-message').hide();
        }
    }

    $('.verify-form').submit(function () {
        empty_field_error = false;
        dob_error = false;

        validate_empty_field();

        if ((empty_field_error == false) && (dob_error == false)) {
            return true;
        } else {
            return false;
        }
    })
})

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class="log"></textarea>
<textarea class="log2"></textarea>
<div id="field-warning-message"></div>

问题原因 #

1. 值获取逻辑错误：$('.log, .log2, textarea').val()只会返回第一个匹配元素的内容，也就是.log的内容，不会检查.log2的状态，导致.log2的内容变化无法影响验证结果。
2. 空值判断冗余：field.length == ''和field.length < 1是重复判断，空字符串的length本身就是0，无需分开处理。

修正后的代码 #

JavaScript 代码 #

$(document).ready(function() {

    $('#field-warning-message').hide();
    $('#dob-warning-message').hide();

    var empty_field_error = false;
    var dob_error = false;

    $('.log, .log2').focusout(function () {
        validate_empty_field();
    });

    function validate_empty_field() {
        // 遍历所有目标textarea，检查是否存在空内容（含仅输入空格的情况）
        var hasEmptyField = $('.log, .log2').filter(function() {
            return $.trim($(this).val()) === '';
        }).length > 0;

        if (hasEmptyField) {
            $('#field-warning-message').show().html("Please fill out form!");
            empty_field_error = true;
        } else {
            $('#field-warning-message').hide();
            empty_field_error = false;
        }
    }

    $('.verify-form').submit(function () {
        empty_field_error = false;
        dob_error = false;

        validate_empty_field();

        return !empty_field_error && !dob_error;
    })
})

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class="log"></textarea>
<textarea class="log2"></textarea>
<div id="field-warning-message"></div>

关键修正点 #

• 批量检查所有元素：用filter方法遍历.log和.log2，逐个判断内容是否为空（通过$.trim过滤空格，避免无效输入）。
• 简化判断逻辑：通过过滤后的元素数量是否大于0，直接判断是否存在空字段。
• 修复状态更新：验证通过时主动将empty_field_error设为false，避免提交判断出错。
• 简化提交判断：将返回值简化为!empty_field_error && !dob_error，逻辑更清晰。

内容的提问来源于stack exchange，提问作者StephenW