javascript, Pardot

Validation Javascript du Code Postal

Si vous cherchez le code pour valider le Code Postal d’un formulaire, vous allez être heureux de lire cet article ! Si vous utilisez Pardot comme outil de marketing automatisé, vous allez être encore plus heureux parce que ce code permet de contourner le problème de ne pas pouvoir limiter le nombre de caractères d’un champ (voir sur l’IdeaExchange : Ability to set field character limit for custom fields on Pardot side).

C’est très simple et ça fonctionne parfaitement sur tous les fureteurs (desktop et mobile).

CODE POSTAL AU CANADA

Au Canada, un code postal est une chaîne de six caractères qui fait partie d’une adresse postale. Tout comme les codes postaux britanniques, les codes postaux du Canada sont alphanumériques, alors que dans la plupart des autres pays du monde, les codes postaux n’utilisent que des chiffres. Les codes canadiens utilisent le format A1B 2C3, alternant lettres et chiffres, avec un espace séparant les deux blocs, entre les troisième et quatrième caractères.

Source : Wikipédia

FORMAT SOUHAITÉ DANS CET EXEMPLE : H0H0H0 (SANS ESPACE)

Dans cet exemple, le JavaScript valide que le champ Code Postal est composé de 6 caractères sans espace, comme par exemple, « H0H0H0 ». Si le format n’est pas respecté, un message d’alerte s’affiche – sinon, le formulaire est envoyé.

La solution : 2 petits bouts de code

1. Mettre ce code dans le <header> de la page.


<script type="text/javascript">
function check_Zip(){
var zipCode = document.getElementsByTagName('input')[5].value;
var regex = /^[a-zA-Z]{1}[0-9]{1}[a-zA-Z]{1}[0-9]{1}[a-zA-Z]{1}[0-9]{1}$/;
if(regex.test(zipCode) == false){
alert("The Postal Code format must be a six alphanumeric character string without space. Example: H0H0H0");
return false;
}
if(zipCode == " "){
alert("Postal Code field cannot be left empty");
return false;
}
return true;
}
</script">

Note : Dans Pardot, il n’est pas possible de modifier le <input> pour identifier le champ à valider. Pour contourner ce problème, le champ du Code Postal est validé d’après sa position dans le formulaire. Dans cet exemple, le champ Code Postal est en 7e position (voir image ci-haut).

2. Mettre ce code dans la balise <form>


<form onsubmit="return check_Zip()">

TESTEZ LE FORMULAIRE AVANT DE LE PUBLIER

Avant de publier votre formulaire, il est impératif de le tester avant. Pour ce faire, videz le cache de votre fureteur – ensuite, testez-le.

C’est tout ! J’espère que ça vous a été utile 🙂

Vous avez aimé cet article, partagez-le et suivez-moi sur Twitter (@ericperreault).

Les opinions exprimées dans cet article sont celles de l’auteur.

Eric Perreault

Eric PerreaultEric s’est forgé une expertise en intelligence d’affaires en exploitant les données du Web analytique, du marketing automatisé et de la gestion de la relation client (CRM). Il aide les entreprises du Québec à utiliser leurs données à leur pleine puissance.

Eric est un spécialiste Pardot pour formation et amélioration.


AUTRES ARTICLES

 

Par défaut

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s