471 lines
19 KiB
XML
471 lines
19 KiB
XML
<metal:block use-macro="main_template">
|
||
<div metal:fill-slot="content">
|
||
|
||
<div class="alert alert-danger" tal:condition="message" tal:content="message" />
|
||
|
||
<div class="row">
|
||
<br />
|
||
<p>Je m’inscris au stage de RECUPERATION DE POINTS qui aura lieu : <br />
|
||
du <b>${stage.debut.strftime("%d-%m-%Y")}</b> à <b>${stage.debut.strftime("%Hh%M")}</b> au <b>${stage.fin.strftime("%d-%m-%Y")}</b><br />
|
||
à : <b>${stage.lieu1} - ${stage.lieu2}</b>
|
||
</p>
|
||
<ul class="nav nav-tabs">
|
||
<li class="active"><a href="#id-tab" data-toggle="tab">Identification <i class="fa"></i></a></li>
|
||
<li tal:condition="etape > 1"><a href="#permis-tab" data-toggle="tab">Votre permis de conduire <i class="fa"></i></a></li>
|
||
<li tal:condition="etape > 2"><a href="#resa-tab" data-toggle="tab">Réservation <i class="fa"></i></a></li>
|
||
|
||
</ul>
|
||
<br />
|
||
<form id="sinscrire-form" action="${url}" role="form" method="post"
|
||
class="form-horizontal"
|
||
data-fv-framework="bootstrap"
|
||
data-fv-icon-valid="glyphicon glyphicon-ok"
|
||
data-fv-icon-invalid="glyphicon glyphicon-remove"
|
||
data-fv-icon-validating="glyphicon glyphicon-refresh">
|
||
|
||
<input type="hidden" id="etape" value="${etape}" />
|
||
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="id-tab">
|
||
<br />
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="civilite">Civilité</label>
|
||
<div class="col-xs-8">
|
||
<select class="form-control" id="civilite" name="civilite">
|
||
<tal:block tal:repeat="item civilites">
|
||
<option value="${item}" tal:attributes="selected item == civilite and 'selected' or None">${item}</option>
|
||
</tal:block>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="nom">Nom d'usage</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="nom" name="nom" value="${nom}" placeholder="Votre nom"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="Le nom est obligatoire"
|
||
data-fv-stringlength="true"
|
||
data-fv-stringlength-max="30"
|
||
data-fv-stringlength-message="34 caractères maximum" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="prenom">Prénom(s)</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="prenom" name="prenom" value="${prenom}"
|
||
placeholder="tel(s) qu’indiqué(s) sur votre pièce d’identité"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="Le prénom est obligatoire"
|
||
data-fv-stringlength="true"
|
||
data-fv-stringlength-max="37"
|
||
data-fv-stringlength-message="37 caractères maximum" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="nom">Nom de naissance</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="nom_jf" name="nom_jf" value="${nom_jf}" placeholder="si différent du nom d'usage"
|
||
data-fv-stringlength="true"
|
||
data-fv-stringlength-max="30"
|
||
data-fv-stringlength-message="34 caractères maximum" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="date_nais">Date de naissance</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="date_nais" name="date_nais" value="${date_nais}" placeholder="JJ/MM/AAAA"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="La date de naissance est obligatoire"
|
||
data-fv-date="true"
|
||
data-fv-date-format="DD/MM/YYYY"
|
||
data-fv-date-message="La date de naissance n'est pas valide (JJ/MM/AAAA)" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="lieu_nais">Lieu de naissance</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="lieu_nais" name="lieu_nais" value="${lieu_nais}"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="Le lieu de naissance est obligatoire"
|
||
data-fv-stringlength="true"
|
||
data-fv-stringlength-max="26"
|
||
data-fv-stringlength-message="26 caractères maximum" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="dept_nais">Département ou pays de naissance</label>
|
||
<div class="col-xs-8">
|
||
<select class="form-control" id="dept_nais" name="dept_nais">
|
||
<tal:block tal:repeat="item dept">
|
||
<option value="${item.code}" tal:attributes="selected item.code == dept_nais and 'selected' or None">
|
||
${item.code} - ${item.libelle}</option>
|
||
</tal:block>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- COORDONNÉES -->
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="adres1">Adresse</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="adres1" name="adres1" value="${adres1}" placeholder="Votre adresse"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="L'adresse est obligatoire"
|
||
data-fv-stringlength="true"
|
||
data-fv-stringlength-max="40"
|
||
data-fv-stringlength-message="40 caractères maximum" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="adres2"></label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="adres2" name="adres2" value="${adres2}" placeholder="(facultatif)"
|
||
data-fv-stringlength="true"
|
||
data-fv-stringlength-max="40"
|
||
data-fv-stringlength-message="40 caractères maximum" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-4" for="code_postal">Code postal - Ville</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="code_postal" name="code_postal" value="${code_postal}"
|
||
placeholder="5 caractères maximum"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="Le code postal est obligatoire">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="no_tel">Téléphone portable</label>
|
||
<div class="col-xs-6">
|
||
<input class="form-control phoneNumber" type="text" id="no_tel" name="no_tel" value="${no_tel}"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="Le numéro de téléphone est obligatoire"
|
||
data-fv-phone="true"
|
||
data-fv-phone-country="FR"
|
||
data-fv-phone-message="Le numéro de téléphone n'est pas vailde" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="mail">Email</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="mail" name="mail" value="${mail}"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="L'adresse email est obligatoire"
|
||
data-fv-emailaddress="true"
|
||
data-fv-emailaddress-message="L'adresse email n'est pas valide" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- case a cocher "Acceptation des infos" -->
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-4 col-xs-7">
|
||
<input type="checkbox" name="cb_spam" value="cb_spam" id="cb_spam"
|
||
tal:attributes="checked cb_spam == 'oui' and 'checked' or None">
|
||
J'accepte de recevoir des informations et offres commerciales éventuelles liées à la sécurité routière.</input>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-4 col-xs-8">
|
||
<button class="btn btn-primary" type="submit" name="form.next1">
|
||
<span class="glyphicon glyphicon-chevron-right"></span> Suivant</button>
|
||
</div>
|
||
</div>
|
||
</div> <!-- id-tab -->
|
||
|
||
|
||
<div class="tab-pane" id="permis-tab">
|
||
<br />
|
||
<div class="well well-sm">
|
||
<ul>
|
||
<li>Il est possible d’effectuer un stage même si vous êtes en rétention ou suspension de permis, dans ce cas vous trouverez les informations nécessaires sur votre notification de suspension ou votre avis de rétention.</li>
|
||
<li>Il est possible d’effectuer un stage même si votre solde de point est nul mais uniquement si vous n’avez pas reçu de « lettre 48SI » notifiant l’invalidation du permis </li>
|
||
<li>Dans les cas n°1 et n° 2, le stage permet de récupérer jusqu’à 4 points sur votre permis de conduire, dans la limite du plafond autorisé et sous condition du respect d’un an et un jour entre deux stages »</li></ul>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="no_permis">Numéro de permis</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="no_permis" name="no_permis" value="${no_permis}"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="Le numéro de permis est obligatoire"
|
||
data-fv-stringlength="true"
|
||
data-fv-stringlength-max="20"
|
||
data-fv-stringlength-message="20 caractères maximum" />
|
||
<p class="help-block">
|
||
Comment trouver mon <a href="/faq_view/2764" target="_blank">numéro de permis</a> ?</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="date_nais">Délivré (imprimé) le</label>
|
||
<div class="col-xs-8">
|
||
<input class="form-control" type="text" id="obtenu_le" name="obtenu_le" value="${obtenu_le}" placeholder="JJ/MM/AAAA"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="La date de délivrance du permis est obligatoire"
|
||
data-fv-date="true"
|
||
data-fv-date-format="DD/MM/YYYY"
|
||
data-fv-date-message="La date de délivrance du permis n'est pas valide (JJ/MM/AAAA)" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="lieu_permis">Préfecture de délivrance</label>
|
||
<div class="col-xs-8">
|
||
<select class="form-control" id="lieu_permis" name="lieu_permis">
|
||
<tal:block tal:repeat="item dept">
|
||
<option value="${item.libelle}" tal:attributes="selected item.libelle == lieu_permis and 'selected' or None">
|
||
${item.code} - ${item.libelle}</option>
|
||
</tal:block>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Mon stage</h3>
|
||
<!-- Type de stage -->
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-1 col-xs-8S">
|
||
<!-- *** CAS 1 *** -->
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="type_stage" value="CAS-1"
|
||
tal:attributes="checked type_stage == 'CAS-1' and 'checked' or None"/>
|
||
<strong>Stage volontaire de récupération de points, cas n°1</strong>
|
||
</label>
|
||
<div id="CAS-1" class="type-stage-panel ">
|
||
<p>destiné aux conducteurs désirant retrouver le bénéfice de points suite à la perte de ceux-ci à l'occasion d'infractions (art. L. 223-6, alinéa 2, et R. 223-8 du code la route).</p>
|
||
<div class="form-group">
|
||
<input type="checkbox" name="cb_cas1" id="cb_cas1" checked > J'atteste ne pas avoir participé à un stage volontaire au cours des douze derniers mois.</input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- *** CAS 2 *** -->
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="type_stage" value="CAS-2"
|
||
tal:attributes="checked type_stage == 'CAS-2' and 'checked' or None" />
|
||
<strong>Stage obligatoire suite à la réception de la lettre 48N, cas n°2</strong>
|
||
</label>
|
||
<div id="CAS-2" class="type-stage-panel">
|
||
<p>destiné aux conducteurs qui ont commis pendant le délai probatoire une infraction ayant donné lieu à une perte d'au moins trois points (art. L 223-6 et R. 223-4 du code de la route). </p>
|
||
<div class="form-group">
|
||
<input type="checkbox" name="cb_cas2" id="cb_cas2" checked > Je souhaite faire un stage suite à la réception de la lettre 48N.</input>
|
||
</div>
|
||
<p>Veuillez renseigner les informations figurant sur votre lettre 48N que je dois apporter lors du stage :</p>
|
||
<div class="form-group">
|
||
<div class="col-xs-6">
|
||
<input class="form-control" type="text" id="infraction_lieu" name="infraction_lieu" value="${infraction_lieu}"
|
||
placeholder="Lieu de l'infraction"
|
||
data-fv-notempty="true"
|
||
data-fv-notempty-message="Le lieu d'infraction est obligatoire"
|
||
data-fv-stringlength="true"
|
||
data-fv-stringlength-max="30"
|
||
data-fv-stringlength-message="30 caractères maximum" />
|
||
</div>
|
||
<div class="col-xs-3">
|
||
<input class="form-control" type="text" id="infraction_le" name="infraction_le" value="${infraction_le}"
|
||
placeholder="Date de l'infraction JJ/MM/AAAA"
|
||
data-fv-date="true"
|
||
data-fv-date-format="DD/MM/YYYY"
|
||
data-fv-date-message="La date de l'infraction n'est pas valide (JJ/MM/AAAA)" />
|
||
</div>
|
||
<div class="col-xs-3">
|
||
<input class="form-control" type="text" id="infraction_a" name="infraction_a" value="${infraction_a}"
|
||
placeholder="Heure au format 00:00"
|
||
data-fv-regexp="true"
|
||
data-fv-regexp-regexp="^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$"
|
||
data-fv-regexp-message="L'heure de l'infraction doit au format 00:00" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- *** CAS 3 *** -->
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="type_stage" value="CAS-3"
|
||
tal:attributes="checked type_stage == 'CAS-3' and 'checked' or None" />
|
||
<strong>Stage obligatoire d'alternative aux poursuites, cas n°3</strong>
|
||
</label>
|
||
<div id="CAS-3" class="type-stage-panel">
|
||
<p>proposé par le Procureur de la République ou en exécution d'une composition pénale (2° de l'article 41-1 et 5° de l'article 41-2 du code de procédure pénale).</p>
|
||
<div class="form-group">
|
||
<input type="checkbox" name="cb_cas3" id="cb_cas3" checked> Je souhaite faire un stage dans le cadre d'une peine complémentaire.</input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- *** CAS 4 *** -->
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="type_stage" value="CAS-4"
|
||
tal:attributes="checked type_stage == 'CAS-4' and 'checked' or None" />
|
||
<strong>Stage obligatoire dans le cadre d'une peine complémentaire, cas n°4</strong>
|
||
</label>
|
||
<div id="CAS-4" class="type-stage-panel">
|
||
<p>ou obligation imposée dans le cadre du sursis avec mise à l'épreuve (art. 131-35-1 et R. 132-45 du codé pénal)</p>
|
||
<div class="form-group">
|
||
<input type="checkbox" name="cb_cas4" id="cb_cas4" checked> Je souhaite faire un stage dans le cadre d'une peine complémentaire.</input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-1 col-xs-4">
|
||
<button class="btn btn-primary" type="submit" name="form.next2">
|
||
<span class="glyphicon glyphicon-chevron-right"></span> Suivant</button>
|
||
</div>
|
||
</div>
|
||
</div> <!-- permis-tab -->
|
||
|
||
<div class="tab-pane" id="resa-tab">
|
||
<br />
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="type">Comment avez-vous connu notre site ?</label>
|
||
<div class="col-xs-8">
|
||
<select class="form-control" id="origine" name="origine">
|
||
<tal:block tal:repeat="item origines">
|
||
<option value="${item.LIBELLE}" tal:attributes="selected item.LIBELLE == origine and 'selected' or None">${item.LIBELLE}</option>
|
||
</tal:block>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label">Montant du stage</label>
|
||
<div class="col-xs-8">
|
||
<p class="form-control-static text-danger"><b>${layout.to_euro(montant)}</b></p>
|
||
</div>
|
||
</div>
|
||
<!-- case a cocher "Acceptation des CGI" -->
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-4 col-xs-7">
|
||
<div class="checkbox">
|
||
<input type="checkbox" name="cb_cgv" id="cb_cgv" class="styled">
|
||
En cochant cette case, je reconnais avoir lu et accepté les <a href="/faq_view/2763" target="_blank">Conditions Générales de Vente ci-après</a>
|
||
et je valide mon inscription par mon règlement.
|
||
</input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-4 col-xs-4">
|
||
<button class="btn btn-primary" type="submit" name="form.submitted">
|
||
<span class="glyphicon glyphicon-ok"></span> Enregistrer et régler l'inscription</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- resa-tab -->
|
||
</div>
|
||
<p><br/></p>
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||
<script>
|
||
$(document).ready(function() {
|
||
// validate the form
|
||
$('#sinscrire-form').formValidation({
|
||
framework: 'bootstrap',
|
||
icon: {
|
||
valid: 'glyphicon glyphicon-ok',
|
||
invalid: 'glyphicon glyphicon-remove',
|
||
validating: 'glyphicon glyphicon-refresh'
|
||
},
|
||
fields: {
|
||
cb_cgv: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Veuillez accepter les Conditions Générales de Vente pour continuer.'
|
||
}
|
||
}
|
||
},
|
||
type_stage: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Veuillez sélectionner un CAS de stage.'
|
||
}
|
||
}
|
||
},
|
||
cb_cas1: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Veuillez confirmer votre sélection en cochant cette case.'
|
||
}
|
||
}
|
||
},
|
||
cb_cas2: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Veuillez confirmer votre sélection en cochant cette case.'
|
||
}
|
||
}
|
||
},
|
||
cb_cas3: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Veuillez confirmer votre sélection en cochant cette case.'
|
||
}
|
||
}
|
||
},
|
||
cb_cas4: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Veuillez confirmer votre sélection en cochant cette case.'
|
||
}
|
||
}
|
||
},
|
||
}
|
||
})
|
||
.find('[name="date_nais"], [name="obtenu_le"]').mask('00/00/0000');
|
||
|
||
if ($("#etape").val() == 2) {
|
||
$('ul.nav li a[href="#permis-tab"]').tab('show');
|
||
} else {
|
||
if ($("#etape").val() == 3) {
|
||
$('ul.nav li a[href="#resa-tab"]').tab('show');
|
||
} else {
|
||
if ($("#etape").val() == 4) {
|
||
$('ul.nav li a[href="#confirm-tab"]').tab('show');
|
||
}
|
||
}
|
||
}
|
||
$("input[name=type_stage]").change(function() {
|
||
var cas = $(this).val();
|
||
$(".type-stage-panel").hide();
|
||
$("#"+cas).show();
|
||
});
|
||
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
|
||
e.preventDefault()
|
||
// show next tab on button "next" click
|
||
$('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
|
||
})
|
||
$('#code_postal').autocomplete({
|
||
source: function (request, response) {
|
||
$.ajax({
|
||
url:'/ajax_codepostal',
|
||
dataType: 'json',
|
||
data: {
|
||
recherche: request.term,
|
||
},
|
||
success: function (data) {
|
||
response( data );
|
||
},
|
||
});
|
||
},
|
||
minLength: 3,
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</div>
|
||
</metal:block>
|