Validazione form con Javascript

Abbiam il nostro form sul quale facciamo già un controllo lato server (che va sempre fatto).

<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
if ($_POST['titolo'] == NULL || $_POST['testo'] == NULL || $_POST['categoria'] == NULL || $_POST['sezione'] == NULL) {
echo 'Titolo, testo, sezione e categoria sono obbligatori';
} else {
saveArticle($_POST['titolo'], $_POST['testo'], $_POST['sezione'], $_POST['categoria']);
header('location:index.php');
}
}
?>
<table>
<form name="articoli" action="" method="post">
<tr>
<td>Titolo:</td>
<td><input type="text" name="titolo" value="" /></td>
</tr>
<tr>
<td>
</td>
<td>
<textarea cols="" rows="" id="testo_articolo" name="testo">
</textarea>
</td>
</tr>
<tr>
<td>Sezione:</td>
<td>
<select name="sezione" onchange="changeSelect(this.value);" id="sezione">
<option value="*">*</option>
<?php
foreach (selectSection () as $rowSection) {
echo "<option value='" . $rowSection['sezione_id'] . "'>" . $rowSection['sezione_nome'] . "</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>Categoria:</td>
<td>
<select name="categoria" id="categoria">
<option value='*'>*</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="Save" name="save" /></td>
</tr>
</form>
</table>

Abbiamo 4 campi da inviare e sono tutti obbligatori.

Questo semplice script che cosa fa: al momento del submit controlla i valori dei 4 campi e se non vanno bene blocca l'invio, sennò passa i parametri a una funzione cha fa l'insert.

Ribadendo che un controllo lato server deve essere sempre fatto, usare questo approccio comporta un grande fastidio: se il form non è vallidato l'invio non viene fatto ma il form si svuota e dobbiamo riscrivere tutto!

Per ovviare a questo problema possiamo usare Javascript.

Partendo da questo form aggiungete un evento onsubmit:

<form name="articoli" action="" onsubmit="return valida();"  method="post">

valida è la funzione JS che metteremo nell'head della pagina:

<script type="text/javascript">
function valida() {
var titolo = document.articoli.titolo.value;
var testo = document.articoli.testo.value;
var sezione = document.articoli.sezione.options[document.articoli.sezione.selectedIndex].value;                                              
var categoria = document.articoli.categoria.options[document.articoli.categoria.selectedIndex].value;
if(titolo == "" || testo == "" || sezione == "*" || categoria == "*") {
alert("Titolo, testo, sezione e categoria sono obbligatori");
return false;
}
}
</script>

Uno script molto semplice.

Con le 4 variabili identifichiamo i campi; la sequenza è document.nome_form_da_validare.nome_campo_da_controllare.

Nel caso delle due select dobbiamo identificare anche l'elemento selezionato (la parte tra parentesi quadre).

Questo script è abbastanza semplice ma potete personalizzarlo come più vi piace.

Ad esempio mettendo un controllo per ogni campo con vari if; così potete dare il focus al campo sbagliato o cambiargli colore.