Nettoyage d'IPI
Remplacez les informations personnelles identifiables (IPI) des champs marqués par des caractères caviardés.
Sur cette page
- Exemple de base
- Exemple avec envoi via Ajax
- Exemple avec validation de formulaire
- Exemple avec validation de formulaire et avec envoi via Ajax
Exemple de base
Vous trouverez ci-dessous un exemple de base de la manière d'implémenter le plugin Nettoyage d'IPI.
Instructions
Remplissez les champs ci-dessous avec les valeurs suivantes :
- Objet :
Mon PRI : 012345678
- Message :
Visa : 4916 0739.3667-6891, Master : 5428735149026050, NAS : 123 123-123, Code postal : K2C 3N2, numéro de permis de conduire : P12345678912345, Compte bancaire : 003-1234567
Afficher le code
<form action="pii-scrub-fr.html" class="wb-pii-scrub">
<div class="form-content">
<div class="form-group">
<label for="subject"><span class="field-name">Objet</span></label>
<input class="form-control" id="subject" name="subject" type="text" data-scrub-field />
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" name="message" data-scrub-field rows="4" cols="50"></textarea>
</div>
<button type="submit" class="btn btn-primary" name="test" value="valeur de test">Soumettre</button>
</div>
</form>
Exemple avec envoi via Ajax et gabarit de fenêtre contextuelle personnalisé
Vous trouverez ci-dessous un exemple démontrant l'implémentation du plugiciel Nettoyage d'IPI avec un formulaire soumis avec l'Envoi via Ajax. Cet exemple démontre également l'utilisation des options srubChar
et moreInfo
.
Instructions
Seul le champ Commentaires possède un attribut data-scrub.
Remplissez le champ Commentaires avec les informations suivantes :Visa : 4916 0739.3667-6891, Master : 5428735149026050, NAS : 123 123-123, Code postal : K2C 3N2, numéro de permis de conduire : P12345678912345, Compte bancaire : 003-1234567
Afficher le code
<form action="pii-scrub-fr.html" class="wb-postback wb-pii-scrub" data-wb-postback='{"success":".success-message","failure":".failure-message"}' data-wb-pii-scrub='{"scrubChar": "████████", "modalTemplate": "[data-scrub-modal]"}'>
<template data-scrub-modal>
<header class="modal-header">
<h2 class="modal-title">Les informations personnelles contenues dans votre commentaire ont été supprimées</h2>
</header>
<div class="modal-body">
<p>Les commentaires servent uniquement à améliorer notre site. Vous ne recevrez pas de réponse.</p>
<p><strong>Pour protéger votre vie privée, votre commentaire sera soumis comme suit :</strong></p>
<div data-scrub-modal-fields></div>
<details class="mrgn-tp-md">
<summary>Qu’est-ce qui est considéré comme une information personnelle?</summary>
<p>Certains types d’informations ne peuvent pas être inclus dans ce formulaire de commentaires, tels que :</p>
<ul>
<li>adresse courriel</li>
<li>numéro de téléphone</li>
<li>code postal</li>
<li>numéro de passeport</li>
<li>numéro d'entreprise</li>
<li>numéro d'assurance sociale (NAS)</li>
</ul>
</details>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-12 col-sm-6 mrgn-tp-sm"><button type="button" class="btn btn-link btn-block popup-modal-dismiss">Fermer et modifier le commentaire</button></div>
<div class="col-xs-12 col-sm-6 mrgn-tp-sm"><button type="button" class="btn btn-primary btn-block popup-modal-dismiss" data-scrub-submit>Soumettre le commentaire</button></div>
</div>
</div>
</template>
<div class="form-content">
<div class="form-group">
<label for="firstname1"><span class="field-name">Prénom</span></label>
<input class="form-control" id="firstname1" name="firstname" type="text" />
</div>
<div class="form-group">
<label for="lastname1"><span class="field-name">Nom de famille</span></label>
<input class="form-control" id="lastname1" name="lastname" type="text" />
</div>
<div class="form-group">
<label for="comments">Commentaires</label>
<textarea class="form-control" id="comments" name="comments" data-scrub-field rows="4" cols="50"></textarea>
</div>
<button class="btn btn-primary" name="test" value="valeur de test">Soumettre</button>
</div>
</form>
<p class="success-message hide">Merci !</p>
<p class="failure-message hide">Une erreur s'est produite. Veuillez soumettre vos informations via une autre méthode.</p>
Exemple avec validation de formulaire
Vous trouverez ci-dessous un exemple illustrant l'implémentation du plugin Nettoyage d'IPI avec validation de formulaire.
Instructions
Seul le champ Commentaires possède un attribut data-scrub.
Remplissez le champ Commentaires avec les informations suivantes :Visa : 4916 0739.3667-6891, Master : 5428735149026050, NAS : 123 123-123, Code postal : K2C 3N2, numéro de permis de conduire : P12345678912345, Compte bancaire : 003-1234567
Afficher le code
<div class="wb-frmvld mrgn-bttm-md">
<form action="pii-scrub-en.html" class="wb-pii-scrub">
<div class="form-content">
<div class="form-group">
<label for="fname1" class="required"><span class="field-name">Prénom</span> <strong class="required">(obligatoire)</strong></label>
<input class="form-control" id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="lname1" class="required"><span class="field-name">Nom de famille</span> <strong class="required">(obligatoire)</strong></label>
<input class="form-control" id="lname1" name="lname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="preferredNumber1">De préférence : <span class="field-name">Numéro de téléphone</span></label>
<input class="form-control" id="preferredNumber1" name="preferredNumber" type="tel" />
</div>
<div class="form-group">
<label for="comments">Commentaires</label>
<textarea class="form-control" id="comments" name="comments" data-scrub-field rows="4" cols="50"></textarea>
</div>
<button class="btn btn-primary">Soumettre</button>
</div>
</form>
</div>
Exemple avec validation de formulaire et avec envoi via Ajax
Vous trouverez ci-dessous un exemple illustrant l'implémentation du plugin Nettoyage d'IPI avec validation de formulaire et envoi via Ajax.
Instructions
Seul le champ Problème possède un attribut data-scrub.
Remplissez le champ Problème avec les informations suivantes :Visa : 4916 0739.3667-6891, Master : 5428735149026050, NAS : 123 123-123, Code postal : K2C 3N2, numéro de permis de conduire : P12345678912345, Compte bancaire : 003-1234567
View code
<div class="wb-frmvld mrgn-bttm-md">
<form action="pii-scrub-en.html" class="wb-pii-scrub wb-postback" data-wb-postback='{"success":".success-message-2","failure":".failure-message-2"}'>
<div class="form-content">
<div class="form-group">
<label for="nomComplet" class="required"><span class="field-name">Nom complet</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="nomComplet" name="nomComplet" type="text" required="required" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="probleme">Problème</label>
<textarea class="form-control" id="probleme" name="probleme" data-scrub-field rows="4" cols="50"></textarea>
</div>
<button class="btn btn-primary">Submit</button>
</div>
</form>
<p class="success-message-2 hide">Merci !</p>
<p class="failure-message-2 hide">Une erreur s'est produite. Veuillez soumettre vos informations via une autre méthode.</p>
</div>
- Date de modification :