У меня есть поле в форме для текстовой области, а все остальные элементы ввода.
Я не могу использовать то же самое для текстовой области, поскольку она не поддерживается для используемого выше метода.
Я хочу получить функцию, если ввод недействителен, верните false, что добавит недопустимый класс и покажет сообщение об ошибке.
Может ли кто-нибудь подсказать, какой альтернативный метод я могу использовать здесь вместо checkValidity для проверки текстовой области?
Я попытался использовать функцию ниже, но событие не было получено
function validateTxt(textArea) {
const reg = new RegExp("^[a-zA-Z0-9]+$")
if (!reg.test(textArea.value)) {
return false
}
return true
}
@TheKNVB 1. Это не решает проблему, описанную в ОП. 2. Пожалуйста, не используйте W3Schools в качестве справочного материала. Их статьи часто устарели, а иногда просто ошибочны. Вместо этого используйте MDN.
Атрибут pattern
не поддерживается элементом textarea
. Вам нужно реализовать это самостоятельно. Это можно сделать, установив его значение в атрибуте data
, который вы используете для создания RegExp в обработчике событий input
для проверки value
. Затем вы можете переключать класс элемента по мере необходимости.
Попробуй это:
$('textarea').on('input', e => {
const $textarea = $(e.target);
const valid = new RegExp($textarea.data('pattern')).test($textarea.val());
$textarea.toggleClass('invalid', !valid);
});
.invalid {
border: 2px solid #C00;
color: #C00;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<textarea type = "text" class = "form txt" id = "message" data-pattern = "^[a-zA-Z0-9]+$"></textarea>
Вы можете обратиться к следующей веб-странице: w3schools.com/js/js_validation_api.asp