Formulari i events. Tècniques avançades

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Veurem una tècnica avançada de com podem associar events als camps d'un formulari. Amb aquesta tècnica aconseguim un codi net, doncs estem separant la part de contingut del formulari de la part de comportament del formulari (el disseny també està separat doncs s'utilitzen fulls d'estil). Aquesta tècnica s'utiltiza per exemple a http://langtrainer.joanillo.org.

Referències

Llibreria validate.js: (mirar!)

Teoria1. 3 tècniques per fer events

fitxer events_3_tecniques.html:

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8" />
<title>Events d'un formulari: tres tècniques, de pitjor a millor</title>
<meta name="description" content="Comptar elements" />
<script src="funcions.js"></script>
</head>
<body onload="afegir_events()">
<h1>Events dun formulari: tres tècniques, de pitjor a millor</h1>
<form>
nom1: <input type="text" name="nom1" onchange="num_min_car(this.value,5)" ><br />
nom2: <input type="text" name="nom2"><br />
nom3: <input type="text" name="nom3"><br />
</form>
</body>
</html>

fitxer funcions.js:

function num_min_car(value,vnum_min_car) {
	//alert(value);
	if (value.length < vnum_min_car) {
		alert('com a mínim ' + vnum_min_car + ' caràcters');
	}
}

function num_min_car_v2(elem,vnum_min_car) {
	var value=elem.value;
	//alert(value);
	if (value.length < vnum_min_car) {
		alert('com a mínim ' + vnum_min_car + ' caràcters');
	}
}

function afegir_events() {
document.forms[0].elements[1].setAttribute("onChange","num_min_car(this.value,5)");

//https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
//If you want to pass parameters to the listener function, you may use an anonymous function
var elem = document.forms[0].elements[2];
elem.addEventListener("change", function(){num_min_car_v2(elem, 5)}, false);
//No funciona doncs per passar paràmetres s'ha d'utilitzar una funció anònima
//elem.addEventListener("change", num_min_car_v2(elem, 5));

}

Teoria2

Fitxers que es necessiten:

Anem a veure pas per pas aquests tres fitxers.

Fitxer us_users.php

<?php include( "inc_head.php" ); ?>
  <body>
<?php include( "inc_cap_esq_dreta.php" ); ?>

<!-- ##### Zona principal ########################################################## -->
        <script src="js_aux.js"></script>
        <script src="js_users.js"></script>
    <div id="zona_ppal">
...
	<div class="required">
	<label class="w80" for="mail">mail:</label>
	<input id="txt" name="mail" />
	</div>
...
    </div> <!-- fi zona_ppal-->

<?php include( "inc_peu.php" ); ?>
<script src="js_forms.js"></script>
<script src="js_form_us.js"></script>

Veiem com utilizem els include per incorporar tot el codi referent a la capçalera, les barres esquerra i dreta, i el peu de pàgina. Els scripts js_aux.js i js_users.js no tenen rellevància referent al que anem a explicar. Tenen a veure amb les funcions AJAX per afegir, editar, esborrar els usuaris.

Hem ficat com a exemple un sol element del formulari, el que fa referència al correu electrònic. Fixem-nos bé que aquest camp del formulari no té associat cap event per tal de validar que el mail sigui correcte.

El que sí que ens importa són els scripts js_forms.js i js_form_us.js. Fixem-nos bé que aquests scripts estan al final de tot, un cop s'han carregat els elements del formulari (el input del mail i els altres elements).

Fitxer js_forms.js

Aquest script és la llibreria de les funcions Javascript que utiltizarem. Concretament conté la funció que el mail estigui ben formatat. Per simplicitat la única cosa que fa és que contingui un punt i una arroba. A classe ja hem vist que amb l'ús de les expressions regulars es pot aconseguir de forma bastant simple una validació de mail molt més ben feta:

function EsMail(element){
        /*de moment, comprova que hi ha . i @*/
        var bIsValidMail;
        bIsValidMail = element.value.indexOf("@")>-1 && element.value.indexOf(".")>-1;
        if (!bIsValidMail){
                alert("no valid mail"); /*tr*/
                element.value="";
        }
        return bIsValidMail;
}

...

function textCounter(element,maxlimit){
        if (element.value.length > maxlimit) /* if too long...trim it!*/
        element.value = element.value.substring(0, maxlimit);
}

A més a més, aquest script conté les següent funcions que explicarem més avall

function nou_event0(element, event, funcio) {
      if (element.addEventListener) {
            element.addEventListener(event, funcio, false); /*Mozilla*/
      } else {
            element.attachEvent("on"+event, funcio); /*IE*/
      }
}

function nou_event1(element, event, funcio, param1) {
      if (element.addEventListener) {
            element.addEventListener(event, function(){funcio(param1)}, false);
      } else {
            element.attachEvent("on"+event, function(){funcio(param1)});
      }
}

function nou_event2(element, event, funcio, param1,param2) {
      if (element.addEventListener) {
            element.addEventListener(event, function(){funcio(param1,param2)}, false);
      } else {
            element.attachEvent("on"+event, function(){funcio(param1,param2)});
      }
}
...

amb el mètode addEventListener estem afegint de forma dinàmica events a diferents elements, events que es comportaran executant unes funcions que poden incloure paràmetres. En aquest cas definim diferents funcions per distingir el cas de què no volem passar paràmetres, o bé 1, 2, ... paràmetres.

js_form_us.js

if (window.location.toString().indexOf("us_users.php")>0) {

        //on som
        var oDiv=document.getElementById("barra");
        oDiv.innerHTML="<a href='us_welcome.php'>LangTrainer</a> » <a href='us_users.php'>Users</a>"; /*

        nou_event1(document.forms[0].name, "change",checkmaj,document.forms[0].name);
        nou_event2(document.forms[0].name, "keyup",textCounter,document.forms[0].name,30);
        nou_event2(document.forms[0].login, "keyup",textCounter,document.forms[0].login,10);
        nou_event2(document.forms[0].pwd1, "keyup",textCounter,document.forms[0].pwd1,10); /*20*3=60*/
        nou_event2(document.forms[0].pwd2, "keyup",textCounter,document.forms[0].pwd2,10);
        nou_event2(document.forms[0].mail, "keyup",textCounter,document.forms[0].mail,30);
        nou_event1(document.forms[0].mail, "change",EsMail,document.forms[0].mail);
        nou_event3(document.getElementById("infopng"), "mouseover",displayInfoFor,'infopng','info',30); /*30 em (amplad
        nou_event2(document.getElementById("infopng"), "mouseout",hideInfoFor,'infopng','info');
}

En aquest cas veiem com, després de què s'hagi carregat el formulari, afegim tots els events associats al formulari. Concretament, per al mail afegim l'event keyup que executarà la funció textCounter i que limita el número de caràcters a 30; i afegim l'event change que executa la funció EsMail i que fa una comprovació bàsica del mail.

Què aconseguim amb això? Fixem-nos que el nostre formulari no conté les paraules onchange, onkeyup,... tenim un formulari net que només ens dóna informació del contingut i no del comportament. El comportament el tenim associat al fitxer js_form_us.js. D'altra banda, tot el disseny el tenim associat al corresponent full d'estils. Per tant, estem en la línia del paradigma modern del disseny web: separar el contingut, del disseny i del comportament, el model vista-controlador. Altres avantatges: el dissenyador es preocupa que el formulari sigui bonic; el programador es preocupa del comportament del formulari.

Ftixers

Pots descarregar-te els tres fitxers involucrats en aquest enllaç, i així pots estudiar més detingudament el codi:


creat per Joan Quintana Compte, gener 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines