kpsul/kfet/templates/kfet/account_create.html

{% extends "kfet/base.html" %}
{% load staticfiles %}

{% block title %}Création d'un nouveau compte{% endblock %}

{% block extra_head %}
<script src="{% static "autocomplete_light/autocomplete.js" %}" type="text/javascript"></script>
{% endblock %}

{% block content %}
<h1>Création d'un nouveau compte</h1>

{% if post %}
    {% if success %}
        Nouveau compte créé : {{ trigramme }}
    {% else %}
        Echec de la création du compte
        {{ errors }}
    {% endif %}
    <hr>
{% endif %}

<form action="{% url "kfet.account.create" %}" method="post">
    {{ account_trigramme_form }}
    <div id="trigramme_valid"></div>
    <input type="text" name="q" id="search_autocomplete" spellcheck="false" placeholder="Chercher un utilisateur par nom, prénom ou identifiant clipper">
    <div id="search_results"></div>
    <div id="form-placeholder"></div>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        // Affichage des résultats d'autocomplétion
        $('input#search_autocomplete').yourlabsAutocomplete({
            url: '{% url "kfet.account.create.autocomplete" %}',
            minimumCharacters: 0,
            id: 'search_autocomplete',
            choiceSelector: 'li:has(a)',
            container: $("#search_results"),
            box: $("#search_results"),
        });

        // Chargement du formulaire adapté au choix sélectionné
        $('input#search_autocomplete').bind(
            'selectChoice',
            function(e, choice, autocomplete) {
                autocomplete.hide();
                link = choice.find('a:first');
                if (link.length && link.attr('href') != undefined) {
                    $('#form-placeholder').html("").load(link.attr('href'));
                }
            }
        );

        // Vérification client de la validité
        // et de ladisponibilité du trigramme choisi
        old_trigramme = "";
        $('#id_trigramme').on('input', function() {
            trigramme = $('#id_trigramme').val();
            container = '#trigramme_valid';

            pattern = /^[^a-z]{3}$/;
            if (!(trigramme.match(pattern))) {
                $(container).text("Non valide");
            } else {
                $.ajax({
                    dataType: "json",
                    url: "{% url "kfet.account.is_validandfree.ajax" %}",
                    data: { trigramme: trigramme },
                }).done(function(data) {
                    if (data['is_free']) {
                        $(container).text("OK");
                    } else {
                        $(container).text("Déjà pris");
                    }
                });
            }
        });
    });
</script>

{% endblock %}