Notice the users about the α-numeric restriction

Add a help text above the two autocompletion inputs letting the users
know that non-alphanumeric characters will not be used.

gestioncof/static/css/cof.css

@@ -800,7 +800,7 @@ input#search_autocomplete {
  height: 40px;
  padding: 10px 8px;
  margin: 0 auto;
- margin-top: 20px;
+ margin-top: 0px;
  display: block;
  color: #aaa;
 }
@@ -1119,3 +1119,10 @@ div.messages div.alert-success div.container {
 div.messages div.alert div.container a {
     color: inherit;
 }
+
+/* Help text */
+
+p.help-block {
+  margin: 5px auto;
+  width: 90%;
+}

gestioncof/templates/registration.html

@@ -9,7 +9,9 @@
 
 {% block realcontent %}
     <h2>Inscription d'un nouveau membre</h2>
-    <input type="text" name="q" id="search_autocomplete" spellcheck="false" />
+    <p class="help-block">Les mots contentant des caractères non alphanumériques seront ignorés</p>
+    <input type="text" name="q" id="search_autocomplete" spellcheck="false"
+           placeholder="Chercher un utilisateur par nom, prénom ou identifiant clipper" />
     <div id="form-placeholder"></div>
     <div class="yourlabs-autocomplete"></div>
     <script type="text/javascript">
@@ -20,7 +22,6 @@
                 minimumCharacters: 3,
                 id: 'search_autocomplete',
                 choiceSelector: 'li:has(a)',
-                placeholder: "Chercher un utilisateur par nom, prénom ou identifiant clipper",
                 box: $(".yourlabs-autocomplete"),
             });
             $('input#search_autocomplete').bind(

kfet/static/kfet/css/index.css

@@ -341,3 +341,7 @@ textarea {
 .help h4 {
     margin:15px 0;
 }
+
+.help-block {
+    padding-top: 15px;
+}

kfet/templates/kfet/account_create.html

@@ -23,6 +23,7 @@
           {{ trigramme_form.trigramme }}
         </div>
         <div id="trigramme_valid"></div>
+        <p class="help-block">Les mots contentant des caractères non alphanumériques seront ignorés</p>
         <input type="text" name="q" id="search_autocomplete" spellcheck="false" placeholder="Chercher un utilisateur par nom, prénom ou identifiant clipper" class="form-control">
         <div style="position:relative;">
           <div id="search_results"></div>