HTML textarea上“ required”属性的行为不一致

Question

我有一个查询表单，当按下按钮时，它会显示在我的聊天窗口中：

此查询框是由JavaScript函数生成的TextArea，因此我使用JQuery设置“ required”属性：

$('#nthelpfull-query-area').prop('required',true);

具有“ required”属性的文本区域的行为与通常的行为有很大不同。例如，this is how it should normally work.

但是在我的TextArea上，警报弹出窗口都不会显示在TextArea上，也不会突出显示TextArea的边框，直到我在其中添加一些文本然后将其删除为止。

在字符串中将TextArea定义为HTML，然后将其注入到容器中也不起作用。

我无法构建一个复制聊天窗口的代码段，但以下是构建TextArea并将其添加到聊天窗口中的动态代码：

function append_form_field(field_name, data)
{
    var mapping =
    {
        'nthelpfull': {
            'validation': '',
            'type': 'textarea',
            'class': 'text',
            'placeholder': 'Query',
            'max_length': '',
            'id': 'nthelpfull-query-area'
        }
    }
    var field = mapping[field_name]
    var el = document.createElement(field.type);
    el.setAttribute('pattern',field.validation)
    el.setAttribute('class', field.class)
    el.setAttribute('placeholder', field.placeholder)
    el.setAttribute('id', field.id)
    el.onchange = function(e)
    {
        validate_data(e, field_name, data)
    }

    $('#messages').append(el) // messages is the chat window container's id
    $('#nthelpfull-query-area').prop('required',true);
}