Validació automàtica de formularis

Aquest apartat explica com es poden configurar els formularis de manera que es validin de forma automàtica abans de ser enviats. L'enviament no es produirà fins que no s'hagin complit totes les condicions especificades a la configuració.

Aquesta configuració s'introdueix al camp Configuració de formulari al contingut de tipus UIB_FORM. En aquest camp es defineixen:

  • Regles: són conjunts parells clau-valor que especifiquen les restriccions
  • Missatges: texts que s'han de mostrar en cas de no complir les regles. Aquest apartat és opcional; si no s'especifiquen missatges apareixeran els definits per defecte

Definició de regles

Per definir les regles s'ha de seguir el següent format:

rules:  {   
  nom_camp: 
  {
     clau: valor,
     clau: valor
  },
  nom_camp:
  {
     clau: valor
  }
}

Primer s'introdueix la paraula "rules" i entre claus ({ }) s'especifica les regles per per a cada camp. Per especificar les restriccions d'un camp concret, s'indica el nom del camp i entre claus, el conjunt de claus-valor que formaran les restriccions. En cas de que hi hagi més d'una restricció per un camp, aquestes es separaran per comes.

Igual passa si hi ha més d'un camp que té restriccions, han d'anar separats per comes.

La següent taula recull el conjunt de claus-valor possibles per especificar les restriccions.

Restriccions a aplicar als camps de formularis de validació automàtica

Clau Valor Restricció
required  true Camp obligatori
selectNone true Selecció obligatoria d'una opció d'un selector. Utilitzat quan es vol fer que el primer valor del select sigui un text com "Triau una opció"(ha de tenir el value="none") i el camp sigui obligatori.
minlength número Longitud mínima del camp
maxlength número Longitud màxima del camp
rangelength [número, número] La longitud del camp està entre aquests dos valors
min número Valor mínim del camp
max número Valor màxim del camp
range [número, número] El valor del camp està entre aquests dos valors
email true El valor ha de ser una adreça de correu vàlida
url true El valor ha de ser una url vàlida
date true El valor ha de ser una data
number true El valor ha de ser un nombre, que pot tenir decimals (separats per punt)
digits true El camp només pot incloure dígits (0-9)
equalTo "#nom_camp"

El camp ha de ser igual a l'especificat a la regla.

Format: el nom del camp ha d'estar entre cometes dobles i precedit pel caràcter (#).

Nota: per tal que funcioni el camp referenciat ha de tenir un atribut id i aquest ha de tenir el mateix valor que l'atribut name.

Missatges personalitzats

Quan una regla no es compleix, surt un avís a l'usuari indicant quin és el problema o restricció aplicada a aquell camp. L'aplicació té un conjunt de missatges per defecte que seran els que es presentaran quan la regla no es validi.

Aquests missatges es poden personalitzar, simplement definint un nou valor per aquell camp i regla al qual es vulgui modificar el comentari per defecte. Així, es poden definir missatges personalitzats per tots els camps i regles, només per alguns camps i algunes regles o per cap camp (i regla).

Per definir els missatges s'ha de seguir el següent format:

messages: {   
  nom_camp: 
  {
     clau: "missatge",
     clau: "missatge"
  },
  nom_camp:
  {
     clau: "missatge"
  }
}

El format és exactament igual que el que s'empra a la definició de regles, només que s'ha canviat la paraula "rules" per "messages" i el missatge s'ha d'especificar entre cometes dobles (" ").

Els missatges se solen definir després de les regles i per tant, després de tancar la clau de definició de les regles haurem de posar una coma ( , ) per separar les dues llistes.

rules:  {   
  nom_camp: 
  {
     clau: valor,
     clau: valor
  },
  nom_camp:
  {
     clau: valor
  }
} ,  messages: {   
  nom_camp: 
  {
     clau: "missatge",
     clau: "missatge"
  },
  nom_camp:
  {
     clau: "missatge"
  }
}

Nota: la validació automàtica se dur a terme mitjançant l'ús del plugin validation de la llibreria jquery. Per més informació, podeu consultar la llibreria jquery o el seu plugin validate.

Exemples

Exemple 1: camp obligatori

El camp de Nom és obligatori.

Formulari:

<!-- camps definits amb l'editor de continguts -->
Nom: <input type="text" value="" name="c_nom" />

Configuració del formulari

rules:
{
  c_nom: { required: true}
}

 Resultat:

Missatge de camp obligatori

Exemple 2: camp obligatori amb longitud mínima

El camp Nom és obligatori i té una longitud mínima de 3 caràcters.

Formulari:

<!-- camps definits amb l'editor de continguts -->
Nom: <input type="text" value="" name="c_nom" />

Configuració del formulari

rules:
{
  c_nom: 
  { 
    required: true, 
    minlength: 3
  }
}

 Resultat:

Missatge de longitud mínima per un camp

Exemple 3: múltiples restriccions sobre diversos camps

Restriccions dels camps:

  • Nom:
    • Obligatori
    • Longitud mínima: 3 caràcters.
  • Correu electrònic:
    • Format de camp de correu
  • Clau d'accés:
    • Obligatori
  • Confirmació de la clau d'accés:
    • Obligatori
    • Igual a la clau d'accés

Formulari:

<!-- camps definits amb l'editor de continguts -->
Nom: <input type="text" value="" name="c_nom" /> 
Correu electrònic: <input type="text" value="" name="c_email" /> 
Clau d'accés: 
    <input type="password" value="" id="c_clau" name="c_clau" />
Confirmació de la clau: 
            <input type="text" value="" name="c_confirmaClau" />

Configuració del formulari

rules:
{
  c_nom: 
  { 
    required: true, 
    minlength: 3
  },
  c_email: { email: true},
  c_clau:  { required: true},
  c_confirmaClau:
  {
    required: true,
    equalTo: "#c_clau"
  }
}

 Resultat:

Missatge de camp obligatori amb més d'un camp que té la restricció

Missatge de validació de camps amb el mateix valor

Exemple 4: missatges personalitzats

Restriccions dels camps:

  • Clau d'accés:
    • Obligatori
  • Confirmació de la clau d'accés:
    • Obligatori
    • Igual a la clau d'accés

Missatges: el missatge que surt per defecte és "Introduïu el mateix valor una altra vegada". En aquest cas, el missatge no deixa clar a quin camp ha de ser igual el valor de la confirmació de la clau, així que introduirem un nou missatge que ho indiqui. El missatge serà "Introduïu la clau d\'accés una altra vegada".

Notes:

  1. Hem afegit el caràcter \ dins el missatge perquè la cometa simple ( ' ) és un caràcter especial que així ho requereix.
  2. Per que se vegi bé l'exemple, els camps s'ha definit com "text" en lloc de com "password". A una aplicació real això no hauria de ser així.
  3. Fixau-vos que només s'ha personalitzat un únic missatge per un camp determinat i una regla determinada. Això vol dir que en cas de no complir-se la resta de restriccions sortiran el missatges definits per defecte.

Formulari:

<!-- camps definits amb l'editor de continguts -->
Clau d'accés: 
     <input type="text" value="" id="c_clau" name="c_clau" />
Confirmació de la clau: 
         <input type="text" value="" name="c_confirmaClau" />

Configuració del formulari

rules:
{
  c_clau:  { required: true},
  c_confirmaClau:
  {
    required: true,
    equalTo: "#c_clau"
  }
},
messages:
{
  c_confirmClau: 
  {
    equalTo: "Introduiu la clau d\'accés una altra vegada"
  }
}

 Resultat:

Missatge personalitzat