В настоящее время я использую SetCustomVality , чтобы показать ошибку при обнаружении URL-адреса:
Код: Выделить всё
{
const urlRegex = /(https?:\/\/|www\.)[^\s/$.?#].[^\s]*/gi;
const descriptionInput = document.querySelector(
'textarea[name="description"], input[name="description"]'
);
if (descriptionInput && urlRegex.test(values.description)) {
descriptionInput.setCustomValidity(
'URLs are not allowed. Please enter text without links.'
);
descriptionInput.reportValidity();
setSubmitting(false);
return;
}
this.handleSubmit(values, setSubmitting, setStatus, resetForm);
}}
>
Поскольку setcustomvality требует, чтобы я вручную переводил сообщение об ошибке для нескольких языков, я бы предпочел запустить Вместо этого нативная ошибка проверки HTML , которая автоматически отображается на языке браузера пользователя.
Что я попробовал:
- Использование шаблона < /code> атрибут:
Это предотвращает подачу формы, но не показывает ошибку, когда пользователь набирает URL.
Код: Выделить всё
- Настройка типа = "url" Есть ли способ использовать Нативная валидация HTML , чтобы помешать пользователям вводить URL-адреса и отображать встроенное сообщение об ошибке вместо использования SetCustomVality ?
Любые предложения или альтернативные подходы будут быть оцененными!
Подробнее здесь: https://stackoverflow.com/questions/794 ... tarea-fiel