Validate Form V2

Allora, ho fatto attendere anche troppo questa nuova versione di validate form. La nuova versione “dovrebbe” funzionare con tutti i browser e richiede mooTools 1.11.

demo

Lo script è leggermente diverso dal precedente. Per prima cosa richiede che il form abbia la classe “validate-form”. Comunque la classe può essere cambiata dalla riga del js:

var validate_class_c="validate-form";

Come nel vecchio, anche qui si basa su un campo nascosto di nome “required” con un value contenente gli id dei campi da controllare del tipo:

<input type="hidden" name="required" value="nome,cognome" />

In questo modo verranno controllati gli input con gli id “nome” e “cognome”.
In caso siano di value vuoto lo script inserirà a un nuovo campo di tipo span con una particolare classe.

La struttura tipo degli input dovrà essere questa:

<p>
<label for="surname">surname</label>
<input type="text" name="surname" id="surname" />
</p>

Naturalmente la struttura può variare, ma l'importante e che ci sia un contenitore attorno all'input.

Lo script funziona con gli input, select, textarea, radiobutton e checkbox.

Per farlo funzionare al meglio si può usare queste righe di css:

form.validate-form p{position:relative;}
form.validate-form .required-input{ position:absolute; top:9px;
right:5px; background: transparent url(img/alert-form.gif);
width:16px; height:16px; display:block;}
form.validate-form .required-input em{ display:none;}

L'immagine alert-form.gif si trova nel pacchetto zip che troverete più giù.

mooTools components required

Core

  • Core.js

Class

  • Class.js

Native

  • Array.js
  • String.js
  • Function.js
  • Number.js
  • Element.js

Element

  • Element.Filters.js
  • Element.Selectors.js

Credo di avervi detto tutto, comunque per qualunque cosa, lasciate pure un commento qui sotto.
Di seguito trovere il pacchetto zip con il file e un demo per utilizzarlo.

Scarica validate form v2