Moduli JavaScript
Convalida del modulo JavaScript
La convalida del modulo HTML può essere eseguita da JavaScript.
Se un campo modulo (fname) è vuoto, questa funzione avvisa un messaggio e restituisce false per impedire l'invio del modulo:
Esempio JavaScript
function validateForm() {
let
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}La funzione può essere richiamata al momento dell'invio del modulo:
Esempio di modulo 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 può convalidare l'input numerico
JavaScript viene spesso utilizzato per convalidare l'input numerico:
Si prega di inserire un numero compreso tra 1 e 10
Convalida automatica del modulo HTML
La convalida del modulo HTML può essere eseguita automaticamente dal browser:
Se un campo modulo (fname) è vuoto, l' requiredattributo impedisce l'invio di questo modulo:
Esempio di modulo HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
La convalida automatica dei moduli HTML non funziona in Internet Explorer 9 o versioni precedenti.
Convalida dei dati
La convalida dei dati è il processo per garantire che l'input dell'utente sia pulito, corretto e utile.
Tipiche attività di convalida sono:
- l'utente ha compilato tutti i campi obbligatori?
- l'utente ha inserito una data valida?
- l'utente ha inserito del testo in un campo numerico?
Molto spesso, lo scopo della convalida dei dati è garantire il corretto input dell'utente.
La convalida può essere definita con molti metodi diversi e distribuita in molti modi diversi.
La convalida lato server viene eseguita da un server Web, dopo che l'input è stato inviato al server.
La convalida lato client viene eseguita da un browser Web, prima che l'input venga inviato a un server Web.
Convalida del vincolo HTML
HTML5 ha introdotto un nuovo concetto di convalida HTML chiamato convalida dei vincoli .
La convalida del vincolo HTML si basa su:
- Attributi di input HTML di convalida dei vincoli
- Convalida del vincolo Pseudoselettori CSS
- Proprietà e metodi DOM di convalida dei vincoli
Attributi di input HTML di convalida dei vincoli
| 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 |
Per un elenco completo, vai su Attributi di input HTML .
Convalida dei vincoli Pseudoselettori CSS
| 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 |
Per un elenco completo, vai a CSS Pseudo Classes .