在textarea中键入时，JavaScript表单验证消息会一直触发

Question

编辑：我使用Symfony表单来创建表单，但不确定是否相关

我正在验证textarea元素以仅检查空格，如果没有字符则抛出错误。检查工作并由提交按钮触发。但是，如果验证消息触发，则每次键入时它都会一直显示，即使它不是空格。

这是我的JS文件

jQuery(document).ready(function () {
//the submit button is #announcement_create_save
    $('#announcement_create_save').click(function () {
        var content = $('#announcement_create_content').val();
// The regex which checks if the field only has whitespace
        if (!(/.*\S+.*/.test(content))) {
            document.getElementById('announcement_create_content').setCustomValidity('Please fill out this field.');
        }
        else {
            document.getElementById('announcement_create_content').setCustomValidity("");
        }
    })
});

HTML

<form name="announcement_create" method="post">
                        <div class="announcement-card-body">
                            <label for="announcementText" class="content-label">Announcement (Supports Markdown)</label>
                            <textarea id="announcement_create_content" name="announcement_create[content]" required="required" class="form-control announcement-text" rows="5" name="content" maxlength="2000"></textarea>
                        </div>
                    </div>
                </div>
            <div class="card-footer border-0 bg-white pt-0">
                <div>
                    <button type="submit" id="announcement_create_save" name="announcement_create[save]" class="btn btn-primary"><span class="fas fa-check"></span>  Post announcement </button>
                    <button type="button" class="btn btn-light" data-dismiss="modal" aria-label="Close">Cancel
                    </button>
                </div>
            </div>

    </form>

Answer 1

激活验证后，将显示一条验证弹出通知，持续几秒钟 等到激活此验证消息，然后尝试进入textarea。

由于javascript加载几秒钟，因此键入时需要延迟，警报不会每次都触发。