Partage

Raccourcir ce script?

3 janvier 2018 à 10:58:20

Bonjour,

Je souhaiterais savoir s'il y a possibilité de factoriser ce script svp? Parce que je répète quasiment à chaque fois la même chose mais pas pour les même input.

function surligne(champ, error) {
	if (error) champ.style.borderColor = '#f00'; 
	else champ.style.borderColor = '#00ff03'; 
}
function checkName(champ) { 
	var regexName = /^[a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï]+([-‘\s][a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï]+)?$/;
	if (!regexName.test(champ.value)) {
		surligne(champ, true); // si erreur : on active la fonction 'surligne'
		return false;
	} else {
		surligne(champ, false);
		return true;
	}
}
function checkMail(champ) {
	var regexMail = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
	if (!regexMail.test(champ.value)) {
		surligne(champ, true);
		return false;
	} else {
		surligne(champ, false);
		return true;
	}
}
function checkTel(champ) {
	var regexTel = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
	if (!regexTel.test(champ.value)) {
		surligne(champ, true);
		return false;
	} else {
		surligne(champ, false);
		return true;
	}
}
function checkText(champ) {
	var regexText = /^(.){4,350}$/;
	if (!regexText.test(champ.value)) { 
		surligne(champ, true);
		return false;
	} else {
		surligne(champ, false);
		return true;
	}
}
function checkForm(f) { 
	var	nameOk = checkName(f.nom),
		mailOk = checkMail(f.mail),
		telOk = checkTel(f.tel),
		textOk = checkText(f.texte);
	if (nameOk && mailOk && telOk && textOk)
		return true; 
	else {
		alert('Veuillez s\'il vous plaît remplir correctement tous les champs.');
		return false; 
	}
}



Et le HTML :

<form method="post" id="formulaire" onsubmit="return checkForm(this)">
                    <h1>Contact me by filling out the form below :</h1>
                    <div class="row">
                         <div class="element">
                              <input type="text" name="nom" class="case contact" placeholder="Name*"  required onblur="checkName(this)"> 
                              <input type="email" name="mail" class="case contact" placeholder="Email*" required onblur="checkMail(this)">
                              <input type="tel" name="tel" class="case contact" placeholder="Phone" onblur="checkTel(this)">
                         </div>
                         <div class="element">
                              <textarea name="texte" class="case" placeholder="Note*" required onblur="checkText(this)"></textarea>
                         </div>
                    </div>
                    <input type="submit" class="case btn" value="SEND">
               </form>



Merci d'avance!

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
3 janvier 2018 à 11:34:31

Hello,

Ce ne répond pas exactement a ta question mais utilise plutôt les patterns validation de HTML5. Ca te permttra d'avoir des message plus normalisé.

https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire

Et tu as le type email pour les champs mail ;)

Un petit +1 si je vous ai aidé est toujours appréciable :).
3 janvier 2018 à 12:14:10

Merci pour la doc intéressante! En effet cela remplit déjà pas mal le taf.

Ceci étant dans le cadre d'un exercice pour l'université de faire « valider » en JS un formulaire du coup je voulais juste savoir si le script que j'avais écrit était faisable en plus court?

3 janvier 2018 à 12:36:38

Bonjour,

Puisque toutes tes fonction checkXXXX se ressemblent, tu peux créer une fonction générique checkField( par exemple) et rajouter un paramètre regex, et ensuite passer la regex en question en argument de ce paramètre, comme ceci :

function surligne(champ, error) {
    if (error) champ.style.borderColor = '#f00';
    else champ.style.borderColor = '#00ff03';
}
function checkField(champ, regex) {
    if (!regex.test(champ.value)) {
        surligne(champ, true); // si erreur : on active la fonction 'surligne'
        return false;
    } else {
        surligne(champ, false);
        return true;
    }
}
function checkForm(f) {
    var nameOk = checkField(f.nom, "/^[a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï]+([-‘\s][a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï]+)?$/"),
        mailOk = checkField(f.mail, "/^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/"),
        telOk = checkField(f.tel, "/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im"),
        textOk = checkField(f.texte, "/^(.){4,350}$/");
    if (nameOk && mailOk && telOk && textOk)
        return true;
    else {
        alert('Veuillez s\'il vous plaît remplir correctement tous les champs.');
        return false;
    }
}

-
Edité par me_moi 3 janvier 2018 à 12:38:00

3 janvier 2018 à 13:06:14

Ca paraît tellement logique vu comme ça... Comment j'appelle la fonction sur les inputs?
3 janvier 2018 à 13:22:09

document.getElementById si la balise contient un attribut id, ou document.getElementsTagName, ou document.querySelector ou document.querySelectorAll 

Cherche sur internet 

3 janvier 2018 à 13:26:54

Tes tests me colleraient des boutons !

  • On n'a pas le droit de s'appeler Jérôme
  • On n'a pas le droit d'avoir un nom de domaine de premier niveau libre (genre .business . gallery  .awesome ...)
  • On n'a pas le droit d'avoir un numéro de téléphone à rallonge (genre mexicain)
Ils sont tous pourris ces tests. je ne comprends pas pourquoi en 2018 (c'est la première fois de l'année que je dis "en 2018" :D Bonne année à tous) on continue à restreindre comme ça les champs de formulaire. L'attribut pattern c'est le DIABLE ! Si test avec regexp il y a, il faut que l'utilisateur puisse valider le formulaire même s'il y a des erreurs. Après tout, c'est souvent dans son intérêt de fournir des informations correctes
3 janvier 2018 à 14:09:49

Écoute tabouretBleu moi je débute, je n'y connais absolument rien et j'ai assez galéré à construire ces regex. Si t'en as des meilleurs à me communiquer et bien ne te gêne surtout pas mais ces remarques là, je m'en passe largement.

3 janvier 2018 à 14:18:40

JP77, tu es libre de faire tous les tests et vérifications que tu veux.
3 janvier 2018 à 15:10:00

Zen, ce n'était pas une attaque personnelle. Je critiquais les tests de formats psycho-rigides. On voit que tu n'as jamais été bloqué au moment du checkout sur un site de vente en ligne parce que le formulaire n'aime pas ton code postal ou je ne sais quoi.

Ces tests ont des défauts qui peuvent bloquer l'utilisation du formulaire, frustrer l'utilisateur et faire perdre des ventes. Tu te rends compte ? Un programmeur sérieux ne laisse pas ça passer. C'est juste impensable. Et ce n'est pas à moi de vous convaincre ou de proposer autre chose (ce que j'ai pourtant fait).

Mes arguments sont valides, j'ai donné une liste d'exemples concrets, c'est ton intérêt d'en prendre connaissance. votre réaction à tous les deux est grotesque.

3 janvier 2018 à 15:10:46

me_moi merci.

Un dernier service à demander avant de clore le sujet.

J'ai cherché sur Internet, mis un id 'nom' sur l'input concernant le nom, mais je n'arrive toujours pas à appeler la fonction car je ne sais pas, premièrement quoi mettre dans le onBlur, et puis où/comment placer le getElementById... Tu peux me montrer que la fonction puisse prendre effet? Désolé :/

Raccourcir ce script?

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown