11544 sujets

JavaScript, DOM et API Web HTML5

Mise en forme de l'input en cas de champ(s) vide(s)

Bonjour,

Je cherche à effectuer un petit complément de fonction mais je ne parviens pas à l'écrire...

Sur base de ces lignes : 

function champsRequis() {
    var requis = document.getElementsByClassName("requis");
    var nb = requis.length;
    
    for (j=0;j<nb;j++) {
        if (document.getElementsByClassName("requis")[j].value==="") {
         ... ? ...
        alert("Les champs ne sont pas tous complets.");
        return false;
    }
    }
}


Je voudrais faire en sorte que les valeurs ciblées comme étant vides grâce à mes classes puissent récolter un border rouge au niveau de l'input (élément/tag)...

Je suis démunie pour l'écrire...
J'ai hasardeusement tenté ceci :

function champsRequis() {
    var requis = document.getElementsByClassName("requis");
    var nb = requis.length;

    for (j = 0; j < nb; j++) {
    if (document.getElementsByClassName("requis")[j].value === "") {
[b]document.getElementsByClassName('requis')[j].style.color='red';[/b]
            alert("Les champs ne sont pas tous complets.");
            return false;
        }
    }
}


mais évidemment, ça ne fonctionne pas...
Je ne comprends pas comment je peux cibler précisément l'élément dont fait partie la classe (à savoir, l'élément input) et je ne sais pas si je peux éviter le innerHTML pour ce genre d'opération...

Mon code HTML (extrait) est celui-ci :
     <form name="CertifPop" action="" method="post">

                <h3>Vos coordonn&eacute;es</h3>

                <p><label>* Nom :</label>
                    <input type="text" id="nameField" name="form[nameField]" class="requis"><span id="nomVide"></span></p>

                <p><label>* Pr&eacute;nom :</label>
                    <input type="text" id="firstNameField" name="form[firstNamesField]" class="requis"><span id="prenomVide"></span></p>
                
                <p><label>* Rue et num&eacute;ro :</label>
                    <input type="text" id="streetField" name="form[streetField]" class="requis"><span id="adresseVide"></span></p>
                
                <p><label>* Code postal :</label>
                    <input type="number" id="zipField" name="form[zipField]" class="requis"><span id="cpVide"></span></p>
                
                <p><label>* Localit&eacute; :</label>
                    <input type="text" id="municField" name="form[municField]" class="requis"><span id="localiteVide"></span></p>
                </form>


Je peux vous demander un petit coup de pouce? Smiley ohwell

Merci d'avance...
Modifié par Reka (20 Dec 2013 - 14:21)
Bon bon, je progresse mais j'ai toujours pas trouvé...

J'ai opté pour cette solution :

(pour test)

function champsRequis() {
    var requis = document.getElementsByClassName("requis");
    var nb = requis.length;
    var alerte= document.getElementById("nameField");
    
    for (j = 0; j < nb; j++) {
        if (requis[j].value === "") {
            alerte.className = "alerte requis";
            alert("Les champs ne sont pas tous complets.");
            return false;
        }
    }
}


En affectant ce style à ma CSS :

        <style>
            .alerte {
                background-color: #cc0000;
            }
            
        </style>


L'ennui c'est que le champ ne devient rouge que le temps de la popup... et redevient blanche à cause du false...

Comment puis-je faire pour maintenir la couleur, s'il vous plait?
Modifié par Reka (20 Dec 2013 - 14:57)
Salut Reka (premier post sur alsa yata !)

Personnellement je fonctionne comme ceci :

function theMichelFunction(form, classError){
	var formElt = document.getElementById(form),
	el = document.getElementsByClassName('mandatory');
	function checkFormOnSubmit(evt){
		for(var i=0, elt = el.length;i<elt;i++){
			if(!el[i].value){
				evt.preventDefault();
				$(el[i]).addClass(classError);
			}
			else{
				console.log('Valeur Remplie : '+el[i].value)
				if($(el[i]).hasClass(classError)){
					$(el[i]).removeClass(classError)
				}
			}
		}
	}

	$(formElt).on('submit', function(e){
		checkFormOnSubmit(e);
	});
	
}
theMichelFunction('ton_Id_de_Formulaire', 'la_class_des_input_en_erreur');


Toutefois attention, ce code ne prend en compte que les input hors radio et checkbox. [/i][/i][/i][/i][/i]

Edit : J'ai du jQuery en amont par contre.
Modifié par GaelHu (20 Dec 2013 - 15:30)
Merci GaelHu ! Smiley smile
Il est long (hélas... mais ça le rend p-e plus performant?), je vais étudier ça... Smiley cligne

sinon je trouve les comportements de mon script (ou de JS?) très étranges...

J'ai fait en sorte que la fonction dont je vous parle figure dans une autre qui en appelle plusieurs en même temps en guise de vérification finale...
Il y a la vérif du format de l'email sur base d'une regexp, la vérif des champs remplis, etc.

Eh bien... :
si j'ai une adresse valide mais un nom vide, mon champ input s'allume le temps de la popup et puis s'éteint.
si par contre mon adresse mail est invalide et mon nom vide, l'ordre des popup est le suivant :
"les champs ne sont pas tous complets" puis "votre adresse email est invalide"...
Et si l'adresse mail est invalide, alors là, mon background-color rouge sur l'input est maintenu...

Je ne comprends pas.
Je ne trouve pas ça logique.
Je n'aime pas ne pas comprendre.
Modifié par Reka (20 Dec 2013 - 15:38)
Utilises tu jQuery ou un autre Framework JavaScript ?

Là si je ne me trompe pas tu souhaites que ton itération affiche une seule alerte
qu'il y ai au moins un champs vide c'est bien cela ?
Tu dis que cela ne marche pas à cause du «return false».
Enlève-le.
À ce moment-là, s’il y a plusieurs champs vides tu auras plusieurs boîtes d’alerte ce que tu ne veux pas.
Remplace donc tes «alert(…)» par l’affectation d’une variable tousMesChampsSontRemplis à faux (que tu auras initialisé à vrai au début de la fonction) et après ta boucle affiche l’alerte si la variable est fausse.
Merci, j'essaie d'adapter mon script en fonction de vos réponses, je reviens que ça fonctionne ou non pour indiquer si le sujet est résolu ou non...
Smiley cligne

GaelHu : pas de Jquery ni de framework, non...
Je dois avouer que je n'y ai que peu touché et que je ne suis pas à l'aise avec ça pour le moment.

Mon but c'était d'afficher un input rouge sur autant de champs requis non complétés qu'il y avait dans le formulaire...
Modifié par Reka (21 Dec 2013 - 16:51)
Sujet clos
Aller à