JavaScript Форми
JavaScript Перевірка форми
Перевірку форми HTML можна виконати за допомогою JavaScript.
Якщо поле форми (fname) порожнє, ця функція сповіщає про повідомлення та повертає false, щоб запобігти надсиланню форми:
JavaScript Приклад
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Ім’я має бути заповнене");
return false;
}
}
Функцію можна викликати, коли надсилається форма:
HTML Форма. Приклад
<form name="myForm" action="/action_page.html" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Спробуйте самі »
JavaScript може перевіряти введені цифри
JavaScript часто використовується для перевірки числового введення:
Будь ласка, введіть число від 1 до 10
Спробуйте самі »Автоматична перевірка форми HTML
Перевірка форми HTML може виконуватися автоматично браузером:
Якщо поле форми (fname) порожнє, атрибут required запобігає надсиланню цієї форми:
HTML Форма. Приклад
<form action="/action_page.html" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Спробуйте самі »
Автоматична перевірка форми HTML не працює в Internet Explorer 9 або раніших версіях.
Перевірка даних
Перевірка даних – це процес забезпечення того, що введені користувачем дані є чистими, правильними та корисними.
Типові завдання перевірки:
- чи користувач заповнив усі необхідні поля?
- користувач ввів правильну дату?
- користувач ввів текст у числове поле?
Найчастіше метою перевірки даних є забезпечення правильного введення користувачем.
Перевірку можна визначити багатьма різними методами та розгорнути різними способами.
Перевірка на стороні сервера виконується веб-сервером після надсилання вхідних даних на сервер.
Перевірка на стороні клієнта виконується веб-браузером перед тим, як дані надсилаються на веб-сервер.
Перевірка обмежень HTML
HTML5 представив нову концепцію перевірки HTML під назвою перевірка обмежень.
Перевірка обмежень HTML базується на:
- Перевірка обмежень HTML Атрибути введення
- Перевірка обмежень Псевдоселекторів CSS
- Перевірка обмежень Властивості та методи DOM
Вхідні атрибути HTML для перевірки обмежень
| Атрибут | Опис |
|---|---|
| disabled | Визначає, що елемент введення має бути вимкнено |
| max | Визначає максимальне значення вхідного елемента |
| min | Визначає мінімальне значення елемента введення |
| pattern | Визначає шаблон значення елемента введення |
| required | Визначає, що для поля введення потрібен елемент |
| type | Визначає тип елемента введення |
Щоб отримати повний список, перейдіть до розділу HTML Атрибути введення.
Псевдоселектори CSS перевірки обмежень
| Селектор | Опис |
|---|---|
| :disabled | Вибирає елементи введення з "вимкненим" визначеним атрибутом |
| :invalid | Вибирає елементи введення з недійсними значеннями |
| :optional | Вибирає елементи введення без "обов’язкових" визначених атрибутів |
| :required | Вибирає елементи введення з "обов’язковим" визначеним атрибутом |
| :valid | Вибирає елементи введення з дійсними значеннями |
Щоб отримати повний список, перейдіть до розділу CSS Псевдо класи.
