Correction et optimisation avancée du <inputChecker>

This commit is contained in:
xdrm-brackets 2015-12-09 11:48:42 +01:00
parent 8afd55351a
commit 2ebf66e0b7
4 changed files with 48 additions and 157 deletions

View File

@ -63,7 +63,7 @@ if(!Authentification::checkUser(0)){
</select><span>Selection du médecin pour la consultation.</span><span class='associated'>Médecin traitant du patient.</span> </select><span>Selection du médecin pour la consultation.</span><span class='associated'>Médecin traitant du patient.</span>
</div> </div>
<br><span>Date: </span> <br><span>Date: &nbsp </span>
<input type='text' id='inDate' placeholder='dd/mm/yyyy'> <input type='text' id='inDate' placeholder='dd/mm/yyyy'>
<br><span>Heure: </span> <br><span>Heure: </span>

View File

@ -16,8 +16,10 @@ if(!Authentification::checkUser(0)){
<link rel='stylesheet' href='css/animations.css'/> <link rel='stylesheet' href='css/animations.css'/>
<link rel='stylesheet' href='css/global.css'/> <link rel='stylesheet' href='css/global.css'/>
<link rel='stylesheet' href='css/responsive.css'/>
<script type='text/javascript' src='js/adjust.js'></script> <script type='text/javascript' src='js/adjust.js'></script>
<script type='text/javascript' src='js/input-checker.js'></script>
</head> </head>
<body> <body>
@ -47,5 +49,6 @@ if(!Authentification::checkUser(0)){
</div> </div>
<script type='text/javascript' src='js/consultations.js'></script>
</body> </body>
</html> </html>

View File

@ -1,152 +1,39 @@
// /* [1] On récupère les 2 <select> de création de RDV /* [1] On récupère les 2 <select> de création de RDV
// ===============================================================*/ ===============================================================*/
// var newRDVPatient = document.getElementById('newRDVPatient'); var newRDVPatient = document.getElementById('newRDVPatient');
// var newRDVMedecin = document.getElementById('newRDVMedecin'); var newRDVMedecin = document.getElementById('newRDVMedecin');
// /* [2] Si on a récupéré les 2 <select>, on créé l'évènement de selection dynamique /* [2] Si on a récupéré les 2 <select>, on créé l'évènement de selection dynamique
// ===============================================================*/ ===============================================================*/
// if( newRDVPatient != null && newRDVMedecin != null ){ if( newRDVPatient != null && newRDVMedecin != null ){
// /* [1] On selectionne dynamiquement le médecin traitant associé /* [1] On selectionne dynamiquement le médecin traitant associé
// =======================================================================*/ =======================================================================*/
// newRDVPatient.addEventListener('change', function(e){ newRDVPatient.addEventListener('change', function(e){
// var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]"); var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]");
// // on selectionne le medecin associé // on selectionne le medecin associé
// newRDVMedecin.value = child.dataset.medecin; newRDVMedecin.value = child.dataset.medecin;
// addClass(newRDVMedecin, 'associated'); addClass(newRDVMedecin, 'associated');
// }, false); }, false);
// // [1] On met en valeur le médecin traitant associé (class=associated) // [1] On met en valeur le médecin traitant associé (class=associated)
// // ======================================================================= // =======================================================================
// newRDVMedecin.addEventListener('change', function(e){ newRDVMedecin.addEventListener('change', function(e){
// var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]"); var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]");
// if( newRDVMedecin.value == child.dataset.medecin ) // si c'est le medecin traitant, on met en valeur l'association if( newRDVMedecin.value == child.dataset.medecin ) // si c'est le medecin traitant, on met en valeur l'association
// addClass(newRDVMedecin, 'associated'); addClass(newRDVMedecin, 'associated');
// else else
// remClass(newRDVMedecin, 'associated'); remClass(newRDVMedecin, 'associated');
// }, false); }, false);
// } }
// /* GESTION DU NUMÉRO DE SÉCU */
// var inSecu = document.getElementById('inSecu'); // input du numéro de sécu
// var ftSecu = 'x xx xx xx xxx xxx xx'; // format du numéro de sécu
// inSecu.addEventListener('keyup', function(e){
// // pour chaque caractère
// for( var i = 0 ; i < inSecu.value.length ; i++ ){
// // [1] si le caractère n'est pas un nombre, on le supprime
// if( isNaN(inSecu.value[i]) )
// inSecu.value = inSecu.value.slice(0, i).concat( inSecu.value.slice(i+1) );
// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme
// if( inSecu.value[i] != ' ' && ftSecu[i] == ' ' )
// inSecu.value = inSecu.value.slice(0, i).concat(' ').concat( inSecu.value.slice(i) );
// // [4] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours
// inSecu.value = inSecu.value.slice(0, ftSecu.length).trim();
// }
// // si input complet
// if( inSecu.value.length == ftSecu.length )
// addClass(inSecu, 'validated');
// else
// remClass(inSecu, 'validated');
// }, false);
// /* GESTION DE LA DATE */
// var inDate = document.getElementById('inDate'); // input de la date
// var ftDate = 'dd/dd/dddd'; // format de la date
// inDate.addEventListener('keyup', function(e){
// // pour chaque caractère
// for( var i = 0 ; i < inDate.value.length ; i++ ){
// // [1] si le caractère n'est pas un nombre, on le supprime
// if( isNaN(inDate.value[i]) )
// inDate.value = inDate.value.slice(0, i).concat( inDate.value.slice(i+1) );
// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme
// if( inDate.value[i] != '/' && ftDate[i] == '/' )
// inDate.value = inDate.value.slice(0, i).concat('/').concat( inDate.value.slice(i) );
// // [3] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours
// inDate.value = inDate.value.slice(0, ftDate.length).trim();
// }
// // [4] vérification de cohérence
// var pJour = inDate.value.slice(0,2);
// var pMois = inDate.value.slice(3,5);
// var pAnnee = inDate.value.slice(6,11);
// // test de la validité
// var pDate = new Date(pJour+'/'+pMois+'/'+pAnnee);
// // if( pDate.toString() != 'Invalid Date' ){
// // var pDateObj = {
// // jour: (''+(pDate.getDate()-1)).length != 2 ? '0'+(pDate.getDate()-1) : ''+(pDate.getDate()-1),
// // mois: (''+(pDate.getMonth()+1)).length != 2 ? '0'+(pDate.getMonth()+1) : ''+(pDate.getMonth()+1),
// // annee: (''+(pDate.getFullYear())).length != 4 ? '0'+(pDate.getFullYear()) : ''+(pDate.getFullYear()),
// // }
// // inDate.value = pDateObj.jour +'/'+ pDateObj.mois +'/'+ pDateObj.annee;
// // }
// }, false);
// /* GESTION DE L'HEURE */
// var inHeure = document.getElementById('inHeure'); // input de la date
// var ftHeure = 'dd:dd'; // format de la date
// inHeure.addEventListener('keyup', function(e){
// // pour chaque caractère
// for( var i = 0 ; i < inHeure.value.length ; i++ ){
// // [1] si le caractère n'est pas un nombre, on le supprime
// if( isNaN(inHeure.value[i]) )
// inHeure.value = inHeure.value.slice(0, i).concat( inHeure.value.slice(i+1) );
// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme
// if( inHeure.value[i] != ':' && ftHeure[i] == ':' )
// inHeure.value = inHeure.value.slice(0, i).concat(':').concat( inHeure.value.slice(i) );
// // [3] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours
// inHeure.value = inHeure.value.slice(0, ftHeure.length).trim();
// }
// // [4] vérification de cohérence
// var pHeures = inHeure.value.slice(0,2);
// var pMinuts = inHeure.value.slice(3,5);
// // on borne les valeurs
// if( pHeures.length == 2 ) pHeures = (pHeures>=24) ? '23' : pHeures;
// if( pMinuts.length == 2 ) pMinuts = (pMinuts>=60) ? '59' : pMinuts;
// // on met au bon format dans tous les cas
// if( pHeures.length == 2 && pMinuts.length == 2 ){
// addClass(inHeure, 'validated');
// inHeure.value = pHeures+':'+pMinuts;
// }else
// remClass(inHeure, 'validated');
// }, false);
/* VERIFICATION DES CHAMPS */ /* VERIFICATION DES CHAMPS */
var inCk = new inputChecker(); var inCk = new inputChecker();
var inDate = document.getElementById('inDate'); var inDate = document.getElementById('inDate');
@ -155,21 +42,18 @@ var inCk = new inputChecker();
// format de date simplifié // format de date simplifié
var dateFormat = new formatChecker( null, var dateFormat = new formatChecker(null,
'Ji/Mi/2iii', 'Ji/Mi/2iii', { 'J': '[0-3]', 'M': '[0-1]' }
{ 'J': '[0-3]', 'M': '[0-1]' }
); );
// format de temps simplifié // format de temps simplifié
var timeFormat = new formatChecker( null, var timeFormat = new formatChecker(null,
'Hi:Mi', 'Hi:Mi', { 'H': '[0-2]', 'M': '[0-6]' }
{ 'H': '[0-2]', 'M': '[0-6]' }
); );
// format numéro SECU simplifié // format numéro SECU simplifié
var secuFormat = new formatChecker( null, var secuFormat = new formatChecker(null,
'S ii ii ii iii iii ii', 'S ii ii ii iii iii ii', { 'S': '[0-1]' }
{ 'S': '[0-1]' }
); );
@ -184,7 +68,6 @@ inCk.append( inSecu, secuFormat, '1 23 45 67 890 123 45' );
inDate.addEventListener('keyup', function(e){ inDate.addEventListener('keyup', function(e){
if( inCk.check(inDate) ) addClass(inDate, 'validated'); // on active la classe si correct if( inCk.check(inDate) ) addClass(inDate, 'validated'); // on active la classe si correct
else{ // si incorrect else{ // si incorrect
remClass(inDate, 'validated'); // on désactive la classe remClass(inDate, 'validated'); // on désactive la classe
inCk.correct(inDate, false); // on corrige partiellement inCk.correct(inDate, false); // on corrige partiellement
if( inCk.check(inDate) ) addClass(inDate, 'validated'); // mise à jour de la classe après correction if( inCk.check(inDate) ) addClass(inDate, 'validated'); // mise à jour de la classe après correction
@ -195,7 +78,6 @@ inDate.addEventListener('keyup', function(e){
inHeure.addEventListener('keyup', function(e){ inHeure.addEventListener('keyup', function(e){
if( inCk.check(inHeure) ) addClass(inHeure, 'validated'); // on active la classe if( inCk.check(inHeure) ) addClass(inHeure, 'validated'); // on active la classe
else{ // si incorrect else{ // si incorrect
remClass(inHeure, 'validated'); // on désactive la classe remClass(inHeure, 'validated'); // on désactive la classe
inCk.correct(inHeure, false); // on corrige partiellement inCk.correct(inHeure, false); // on corrige partiellement
if( inCk.check(inHeure) ) addClass(inHeure, 'validated'); // mise à jour de la classe après correction if( inCk.check(inHeure) ) addClass(inHeure, 'validated'); // mise à jour de la classe après correction
@ -205,7 +87,6 @@ inHeure.addEventListener('keyup', function(e){
inSecu.addEventListener('keyup', function(e){ inSecu.addEventListener('keyup', function(e){
if( inCk.check(inSecu) ) addClass(inSecu, 'validated'); // on active la classe if( inCk.check(inSecu) ) addClass(inSecu, 'validated'); // on active la classe
else{ // si incorrect else{ // si incorrect
remClass(inSecu, 'validated'); // on désactive la classe remClass(inSecu, 'validated'); // on désactive la classe
inCk.correct(inSecu, false); // on corrige partiellement inCk.correct(inSecu, false); // on corrige partiellement
if( inCk.check(inSecu) ) addClass(inSecu, 'validated'); // mise à jour de la classe après correction if( inCk.check(inSecu) ) addClass(inSecu, 'validated'); // mise à jour de la classe après correction

View File

@ -246,6 +246,8 @@ inputChecker.prototype = {
if( !this.check(pInputElement) ){ // si la chaîne n'est pas correcte if( !this.check(pInputElement) ){ // si la chaîne n'est pas correcte
var lastChar = null;
/* [2] Cas 1 : vérification de la chaîne complète /* [2] Cas 1 : vérification de la chaîne complète
====================================================*/ ====================================================*/
for( var i = 0 ; i < RegExpByChar.length ; i++ ){ // on parcours le pattern for( var i = 0 ; i < RegExpByChar.length ; i++ ){ // on parcours le pattern
@ -254,21 +256,26 @@ inputChecker.prototype = {
if( !pToEnd && i >= this.input[index].value.length ) if( !pToEnd && i >= this.input[index].value.length )
break; break;
lastChar = tmpValue[i];
// RegExp sur le caractère en question // RegExp sur le caractère en question
var tmpRegExp = new RegExp( '^'+RegExpByChar[i]+'$' ); var tmpRegExp = new RegExp( '^'+RegExpByChar[i]+'$' );
/* (1) Valeur inexistante (string.length < schéma.length) /* (1) Valeur inexistante (string.length < schéma.length)
-----------------------------------------------------------*/ -----------------------------------------------------------*/
if( tmpValue.length == 0 || tmpValue[i] == null ){ if( tmpValue.length == 0 || tmpValue[i] == null )
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) ); tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) );
i++; // on incrémente car on décale la valeur
/* (2) Valeur ne correspond pas au schéma du caractère /* (2) Valeur ne correspond pas au schéma du caractère
-----------------------------------------------------------*/ -----------------------------------------------------------*/
}else if( tmpValue[i].match(tmpRegExp) == null ) else if( tmpValue[i].match(tmpRegExp) == null ){
// si le caractère suivant match, on décale d'une position
if( tmpValue[i].match(new RegExp( '^'+RegExpByChar[i+1]+'$' )) != null )
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) ); tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) );
// Remarque. Ici on ne décale pas (i++) car le décalage fait correspondre au schéma // sinon on remplace
else
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i+1) );
}
} }