====== Gestire i Form ======

[[namespace:javascript|Pagina principale di Javascript]]

La gestione dei form è uno dei principali usi di JavaScript.

La gesione dei form consiste nel controllare se un campo è compilato o meno oppure se in un dato campo è inserito un valore giusto.

I from servono a passare dati da una pagina all'altra, le pagine che ricevono i dati utilizzano il valore dell'attributo name dei tag del form. Per questo per fare controlli sui campi utlizzeremo l'atributo name e la proprietà value.
<Code:HTML linenums:1 | L'attributo name>
<form id="myForm">
    <label>Nome:</label>
    <input type="text" name="nome">
    <input type="button" value="Vai" onclick="controlla()">
</form>

<script>
    function controlla(){
        let nome = document.querySelector('#myForm input[name=nome]').value
        console.log(nome)
    }    
</script>
</Code>

=====Vedere se un campo è stato compilato=====

==== Campi di testo ====
I campi testo sono i campi nei quali l'utente può scrivere:
  * password
  * textarea
  * textfield

Il contenuto di questi campi è sempre una stringa, anche se inseiramo al loro interno dei valori numerici.
Se abbiamo bisgono di controllare se in uno di questi campi ci sia un valore numerico, bisogna effettuare delle conversioni di tipo.

Per controllare se un campo è compilato si controlla la lunghezza della stringa corrispondeten al suo valore.

<Code:HTML linenums:1 | Controllare i campi di testo>
<form id="cdt">
    <label for="campoDiTesto">Campo di testo</label><br>
    <input type="text" name="campoDiTesto"><br>
    <label for="pwd">Password</label><br>
    <input type="password" name="pwd"><br>
    <label for="textarea">Area di testo</label><br>
    <textarea name="textarea"></textarea>
    <input type="button" value="Vai" onclick="controlla()">
</form>

<script>
    function controlla(){
        let campoDiTesto = document.querySelector('#cdt input[name=campoDiTesto]').value;
        let pwd = document.querySelector('#cdt input[name=pwd]').value;
        let textarea = document.querySelector('#cdt textarea[name=textarea]').value;
        if(campoDiTesto.length==0){
            alert('Inserire un valore nel campo');
            //metto il cursore nel campo 
            document.querySelector('#cdt input[name=campoDiTesto]').focus();
        } else if(pwd.length==0){
            alert('Inserire un valore nel campo');
            //metto il cursore nel campo 
            document.querySelector('#cdt input[name=pwd]').focus();
        } else if(textarea.length==0){
            alert('Inserire un valore nel campo');
            //metto il cursore nel campo 
            document.querySelector('#cdt textarea[name=textarea]').focus();
        } else {
            alert('Il form è compilato correttamente');
        }
    }
</script>
</Code>

==== Select ====

L'utente non può scrivere nulla all'interno dei menù a tendina, può solamente selezionare una voce tra quelle presenti.
Se non si seleziona nulla la voce di default è la prima della tendina, quindi si usa mettere un valore specifco nella tendina per controllare se l'utente ha selezionato qualcosa.

<Code:HTML linenums:1 | Controllo di una tendina>
<form id="sel">
    <select name="lavoro">
        <option value="---">Scegli un lavoro</option>
        <option value="impiegato">Impiegato</option>
        <option value="disoccupato">Disoccupato</option>
        <option value="pIva">Libero professionista</option>
    </select>
    <input type="button" value="Vai" onclick="controlla()">
</form>
<script>
    function controlla(){
        let lavoro = document.querySelector('#sel select[name=lavoro]').value;
        if (lavoro=='---'){
            alert('Scegliere un lavoro');
        }
    }
</script>
</Code>

==== Checkbox ====

Anche il checkbox è un campo nel quale l'utente non può scrivere, è possibile controllare se è spuntato o meno:

<Code:HTML linenums:1 | Controllo di un checkbox >
<form id="cb">
    <label for="cbName">Checkbox</label>
    <input type="checkbox" name="cbName" onchange="controlla()"> 
</form>
<script>
    function controlla(){
        let cbName = document.querySelector('#cb input[name=cbName]');
        if (cbName.checked){
            alert('Il checkbox è spuntato');
        } else {
            alert('Il checkbox non è spuntato');
        }
    }
</script>
</Code>

==== Radio ====

Il radio serve per le scelte opzonali. Anche nel radio non è possibile inseire valori ma si può controllare se è spuntato o meno.

<Code:HTML linenums:1 | Radio button>
<form id="radio">
    <p>Qual è il tuo piatto preferito?</p>
    <input type="radio" name="preferito" value="pasta">Pasta<br>
    <input type="radio" name="preferito" value="carne">Carne<br>
    <input type="radio" name="preferito" value="pesce">Pesce<br>
    <input type="radio" name="preferito" value="verdura">Verdura<br>
    <input type="button" value="Vai" onclick="controlla()">
</form>
<script>
    function controlla(){
        let radio = document.querySelectorAll('#radio input[name=preferito]');
        let chk = false;
        let val;
        for(i=0;i<radio.length;i++){
            if(radio[i].checked){
                chk = true;
                val = radio[i].value;
            }    
        }
        if (chk){
            alert('Hai sceto ' + val);
        } else {
            alert('Scegli un valore');
        }
    }
</script>
</Code>

===== Controllare se un campo contiene un numero =====

Per controllare se un campo contiene un valore numerico, basta fare riferimento solo ai campi di testo, quanto detto varrà anche i campi password e textarea.

==== parseInt ====


La funzione **parseInt()** prende in input una stringa e restituisce un valore intero se la stringa può essere converita oppure **NaN**. NaN sta per Not a Number ed è il valore tornato da parseInt() qunado non riesce ad eseguire la conversione.

<Code:javascript linenums:1 | parseInt()>
let str1 = "123";
let num1 = parseInt(str1); //num vale 123

let str2 = "123abc";
let num2 = parseInt(str2); //num vale 123

let str3 = "abc123";
let num3 = parseInt(str3); //num vale NaN
</Code>

Quando la stringa inizia con dei numeri tramite parseInt() viene convertita in un numero, se la stringa  con delle lettere la stringa viene convertita in NaN.

Per controllare se una stringa contiene o meno un valore numerico, inseme a parseInt() di può usare la funzione isNaN().

==== isNaN ====

La funzione **isNaN()** torna true se il parametro passato è NaN, falso altrimenti. 

<Code:javascript linenums:1 | isNaN()>
let str1 = "123";
let num1 = parseInt(str1); //num vale 123
isNaN(str1) //vale false

let str2 = "abc123";
let num2 = parseInt(str2); //num vale NaN
isNaN(str2) //vale true
</Code>


==== Campo numerico ====

Vediamo il codice per controllare se un campo di un form è numerico:

<Code:HTML linenums:1 | Campo numerico>
<form id="num">
    <input type="text" name="stringNum">
    <input type="button" value="Vai" onclick="controlla()">
</form>    
<script>
    function controlla(){
        let stringNum = document.querySelector('#num input[name=stringNum]').value;
        stringNum = parseInt(stringNum);
        if(isNaN(stringNum)){
            alert('Inserire un valore numerico');
            document.querySelector('#num input[name=stringNum]').focus();
        } else {
            document.querySelector('#num').submit(); //invia il form
        }
    }
</script>
</Code>

====parseFloat====

La funzione **parseFloat()** è molto simile a parseInt(), solo che converte una stringa in un numero con la virgola, anche in questo caso se la conversione non è possibile il risultato sarà NaN.

<Code:javascript linenums:1| parseFloat>
let str1 = "123.23";
let num1 = parseFloat(str1); //num vale 123.23
 
let str2 = "123.23abc";
let num2 = parseInt(str2); //num vale 123.23
 
let str3 = "abc123.23";
let num3 = parseInt(str3); //num vale NaN
</Code>

===== Validare una email =====

La validazione di un indirizzo email consiste nel controllare se l'email e scritta nel modo corretto. Con javascript non è possibile sapere se una email esiste o meno.

Ecco una funzione che controlla la corretterzza dell'indirizzo email:

<Code:javascript linenums:1 | Validare una email>
function ValidateEmail(input) {
    var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    if (input.value.match(validRegex)) {
        alert("Indirizzo email valida!");
        return true;
    } else {
        alert("Indirizzo email non valida!");
        return false;
    }
}
</Code>