Discussion :

[umiak]

Bonjour,

Dans un formulaire de contact qui contient les champs "votre mail" et "votre message" (input et textarea), je voudrais étendre ces objets pour leur ajouter un attribut. Le problème c'est que je n'ai réussi à le faire qu'en passant par l'objet Element. Du coup tous les tags HTML sont étendus ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
	// augmente l'objet Element de l'Attribut : regEx
	Element.prototype.regEx = "";

Comment faire pour étendre uniquement les champs de mon formulaires ?
D'avance merci.

[Bovino]

Avant de te répondre, il serait bon de comprendre exactement ce que tu cherches à faire parce que là, c'est pas très clair...
Ceci dit, ta bribe d'explication semble indiquer que tu cherches à réinventer la roue, en particulier l'attribut HTML5 pattern.

[SpaceFrog]

soit pattern pour forcer un format ...

ou si il s'agit juste d'un attribut il y a aussi data-nomattribut

[umiak]

Merci pour vos réponses, pour info l'idée est d'accompagner l'utilisateur avec un message d'info lorsque le champ est actif (onfocus) et un message de feedback dès qu'il le quitte (onblur). Ces messages sont dans des div, masqués en css.

Du peut d'essai que j'ai réalisé avec pattern (html5) je n'arrivais à afficher le feedback qu'au submit, pour un long formulaire c'est un peu tard.

L'attribut data semble intéressant ... je vais creuser

Néanmoins, j'aimerais quand même bien savoir comment étendre précisément un objet DOM sans passer par l'objet Element ...

[Kaamo]

Étendre les objets natifs du DOM est une mauvaise pratique ... (même si Prototype, Mootools l'ont fait, mais c'est un autre débat).
Une bonne pratique, comme le fait jQuery, est de créer un "wrapper" qui permet d'utiliser des fonctions personnalisées sur un élément ou une collection d'élément.

Ou plus simplement, directement attacher des événements aux éléments ciblés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Attacher un événement à un élément
var bindEvent = function( element, type, eventHandler ) {
  if ( element.addEventListener ) {
    element.addEventListener( type, eventHandler, false );
  } else if ( element.attachEvent ) {
    element.attachEvent( "on" + type, eventHandler );    
  }
};
 
bindEvent(document.getElementById('votre_mail'), 'focus', function (evt) {
  console.log('sélectionner votre mail');
});
 
bindEvent(document.getElementById('votre_mail'), 'blur', function (evt) {
  if (evt.currentTarget.value === '') { // ou regEx
    console.log('Le champ est toujours vide ou pas au bon format !');
    evt.currentTarget.style.backgroundColor  =  '#f00';
  } else {
    evt.currentTarget.style.backgroundColor  =  '#fff';
  }
});

[SylvainPV]

+1 pour un wrapper plutôt que de modifier le prototype

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function SuperChamp(element, regex){
    this.element = element;
    this.regex = regex;
 
    bindEvent(element, 'focus', function(){
        //faire ce que tu veux avec ta regex ou d'autres infos
    });
}
 
var monSuperChamp = new SuperChamp(document.querySelector('input.email'), emailRegEx);