Aide sur script contrôle formulaire

Fermé
webmc Messages postés 23 Date d'inscription samedi 14 juillet 2007 Statut Membre Dernière intervention 13 août 2010 - 10 août 2010 à 23:55
webmc Messages postés 23 Date d'inscription samedi 14 juillet 2007 Statut Membre Dernière intervention 13 août 2010 - 13 août 2010 à 13:13
Bonjour à tous,

Voilà, j'utilise avec plaisir ce script pour contrôler un formulaire :

// form validation function //

function validate(form) {
var objet = form.objet.value;
var nom = form.nom.value;
var telephone = form.telephone.value;
var telephoneRegex = /^0[1-9]([-. ]?[0-9]{2}){4}$/;
var courriel = form.courriel.value;
var courrielRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
var message = form.message.value;
var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/gim);
var code = form.code.value;
var codeRegex = /^([- a-zA-Zéèëêäâàùüûîïÿöôoeç]+)$/;

if(objet == "") {
inlineMsg('objet','Merci d\'indiquer la nature de votre message',0);
return false;
}
if(nom == "" || nom == "Nom & Prénom") {
inlineMsg('nom','Merci d\'indiquer vos nom et prénom',0);
return false;
}
if(telephone == "" || telephone == "Téléphone") {
inlineMsg('telephone','Merci d\'indiquer votre numéro de téléphone',0);
return false;
}
if(!telephone.match(telephoneRegex)) {
inlineMsg('telephone','Merci de vérifier votre numéro de téléphone',0);
return false;
}
if(courriel == "" || courriel == "Courriel") {
inlineMsg('courriel','Merci d\'indiquer votre adresse email',0);
return false;
}
if(!courriel.match(courrielRegex)) {
inlineMsg('courriel','Merci de vérifier votre adresse email',0);
return false;
}
if(message == "" || message == "Message") {
inlineMsg('message','Merci de saisir votre message',0);
return false;
}
if(message.match(messageRegex)) {
inlineMsg('message','Merci de saisir un message valide',0);
return false;
}
if(code == "" || code == "Merci d'inscrire ici le résultat en lettres : 2+4" || code == "Merci d'inscrire ici le résultat en lettres : 1+2" || code == "Merci d'inscrire ici le résultat en lettres : 6-2" || code == "Merci d'inscrire ici le résultat en lettres : 2x5") {
inlineMsg('code','Merci d\'inscrire ici le résultat du calcul',0);
return false;
}
if(!code.match(codeRegex)) {
inlineMsg('code','Merci de saisir uniquement des lettres',0);
return false;
}
return true;
}

// START OF MESSAGE SCRIPT //

var MSGTIMER = 25;
var MSGSPEED = 50;
var MSGOFFSET = 0;
var MSGHIDE = 1;

// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById('msg')) {
msg = document.createElement('div');
msg.id = 'msg';
msgcontent = document.createElement('div');
msgcontent.id = 'msgcontent';
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = 'alpha(opacity=0)';
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById('msg');
msgcontent = document.getElementById('msgcontent');
}
msgcontent.innerHTML = string;
msg.style.display = 'block';
var msgheight = msg.offsetHeight;
var targetdiv = document.getElementById(target);
targetdiv.focus();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(msg.timer);
msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;  
}
window.setTimeout("hideMsg()", (autohide * 1000));
}

// hide the form alert //
function hideMsg(msg) {
var msg = document.getElementById('msg');
if(!msg.timer) {
msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
}
}

// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getElementById('msg');
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opacity = (value / 100);
msg.style.filter = 'alpha(opacity=' + value + ')';
if(value >= 99) {
clearInterval(msg.timer);
msg.timer = null;
} else if(value <= 1) {
msg.style.display = "none";
clearInterval(msg.timer);
}
}

// calculate the position of the element in relation to the left of the browser //
function leftPosition(target) {
var left = -400;
if(target.offsetParent) {
while(1) {
left += target.offsetLeft;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.x) {
left += target.x;
}
return left;
}

// calculate the position of the element in relation to the top of the browser window //
function topPosition(target) {
var top = 0;
if(target.offsetParent) {
while(1) {
top += target.offsetTop;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.y) {
top += target.y;
}
return top;
}

// preload the arrow //
if(document.images) {
arrow = new Image(7,80); 
arrow.src = "images/msg_arrow.gif"; 
}



Avec le Css suivant :

#msg {font-weight: bold; color: #FFF; font-family: Verdana, Geneva, sans-serif; font-size: 12px; position:absolute; z-index:100;}
#msgcontent {width:388px; height:16px; padding:5px;	max-width: 400px; background-color: #F90; border: 1px solid #FFF;}


Au final une div vient recouvrir les champs pour afficher le message d'erreur.

Mon problème, c'est que lorsqu'il s'agit d'un "textarea" la div ne remplie pas toute la hauteur, mais seulement un "block" de la même hauteur que les "imput". Je pensais utiliser le css mais cela ne fonctionne pas. Du genre "#msgcontent textarea {width:388px; height:100px; ...}

Après réflexion, la solution pourrait être d'appeler le nouveau css seulement si le textarea est sélectionné. pour ce faire, j'ai trouvé les endroits ou il faut changer le css (ligne 9 et 17) :


// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById('msg')) {
msg = document.createElement('div');
msg.id = 'msg';
msgcontent = document.createElement('div');
msgcontent.id = 'msgcontent'; // ici le CSS à changer
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = 'alpha(opacity=0)';
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById('msg');
msgcontent = document.getElementById('msgcontent'); // ici le CSS à changer
}
msgcontent.innerHTML = string;
msg.style.display = 'block';
var msgheight = msg.offsetHeight;
var targetdiv = document.getElementById(target);
targetdiv.focus();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(msg.timer);
msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;  
}
window.setTimeout("hideMsg()", (autohide * 1000));
}


Sauf que je ne trouve pas la syntaxe pour faire l'alternative avec if et else, car je ne sais pas comment stipuler (si le champ imput "message" est selectionné appliquer le code 1 sinon le code2) :

var textarea = form.message;
if(textarea) {

code1

} else {

code2

}


Désolé pour la longueur de mon annonce mais faut bien que j'explique un peu :) !
Alors, si une âme charitable peut me filer un coup de main... ça me permettrait de peaufiner ce script plutôt sympa.

Merci d'avance !

1 réponse

webmc Messages postés 23 Date d'inscription samedi 14 juillet 2007 Statut Membre Dernière intervention 13 août 2010 8
13 août 2010 à 13:13
Bonjour,

Voici la réponse grâce à typo présent sur le forum : https://www.toutjavascript.com/main/index.php3

"Il faut ajouter la ligne suivante entre la fin du "else" et "msgcontent.innerHTML = string;" de la fonction "inlineMsg", soit :

if ( target == "message" ) { msgcontent.style.height = "100px" } else { msgcontent.style.height = "16px" }


ça pourra sans doute servir à quelqu'un !
@bientôt !
0