Как сделать проверку полей формы для различных входов?

У меня есть поле в форме для текстовой области, а все остальные элементы ввода.

Я не могу использовать то же самое для текстовой области, поскольку она не поддерживается для используемого выше метода.

Я хочу получить функцию, если ввод недействителен, верните false, что добавит недопустимый класс и покажет сообщение об ошибке.

Может ли кто-нибудь подсказать, какой альтернативный метод я могу использовать здесь вместо checkValidity для проверки текстовой области?

Я попытался использовать функцию ниже, но событие не было получено

function validateTxt(textArea) {
  const reg = new RegExp("^[a-zA-Z0-9]+$")
  if (!reg.test(textArea.value)) {
    return false
  }
  return true
}

Вы можете обратиться к следующей веб-странице: w3schools.com/js/js_validation_api.asp

The KNVB 13.02.2023 10:38

@TheKNVB 1. Это не решает проблему, описанную в ОП. 2. Пожалуйста, не используйте W3Schools в качестве справочного материала. Их статьи часто устарели, а иногда просто ошибочны. Вместо этого используйте MDN.

Rory McCrossan 13.02.2023 10:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Атрибут 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>

Другие вопросы по теме