Formularze JavaScript
Walidacja formularza JavaScript
Walidację formularza HTML można przeprowadzić za pomocą JavaScript.
Jeśli pole formularza (fname) jest puste, ta funkcja wyświetla komunikat i zwraca wartość false, aby zapobiec przesłaniu formularza:
Przykład JavaScript
function validateForm() {
let
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}Funkcję można wywołać po przesłaniu formularza:
Przykład formularza HTML
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript może sprawdzić poprawność danych liczbowych
JavaScript jest często używany do sprawdzania poprawności danych liczbowych:
Wprowadź liczbę od 1 do 10
Automatyczna walidacja formularzy HTML
Walidacja formularza HTML może odbywać się automatycznie przez przeglądarkę:
Jeśli pole formularza (fname) jest puste, requiredatrybut uniemożliwia przesłanie tego formularza:
Przykład formularza HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Automatyczne sprawdzanie poprawności formularzy HTML nie działa w programie Internet Explorer 9 lub starszym.
Walidacji danych
Sprawdzanie poprawności danych to proces zapewniający, że dane wprowadzane przez użytkownika są czyste, poprawne i użyteczne.
Typowe zadania weryfikacyjne to:
- czy użytkownik wypełnił wszystkie wymagane pola?
- czy użytkownik wprowadził poprawną datę?
- czy użytkownik wprowadził tekst w polu numerycznym?
Najczęściej celem walidacji danych jest zapewnienie prawidłowego wprowadzania danych przez użytkownika.
Walidację można zdefiniować za pomocą wielu różnych metod i wdrożyć na wiele różnych sposobów.
Walidacja po stronie serwera jest wykonywana przez serwer WWW, po wysłaniu danych wejściowych do serwera.
Walidacja po stronie klienta jest wykonywana przez przeglądarkę internetową, zanim dane wejściowe zostaną wysłane do serwera WWW.
Walidacja ograniczeń HTML
HTML5 wprowadził nową koncepcję walidacji HTML o nazwie walidacja ograniczeń .
Walidacja ograniczeń HTML opiera się na:
- Walidacja ograniczeń Atrybuty wejściowe HTML
- Walidacja ograniczeń CSS Pseudo Selectors
- Walidacja ograniczeń DOM Właściwości i metody
Walidacja ograniczeń Atrybuty wejściowe HTML
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
Aby zobaczyć pełną listę, przejdź do Atrybuty wejściowe HTML .
Pseudo selektory CSS z walidacją ograniczeń
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
Pełną listę znajdziesz w CSS Pseudo Classes .