341 lines
14 KiB
XML
341 lines
14 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 B96 qui aura lieu : <br />
|
||
le <b>${stage.debut.strftime("%d-%m-%Y")}</b> à <b>${stage.debut.strftime("%Hh%M")}</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="form-group">
|
||
<label class="col-xs-4 control-label" for="no_permis">Numéro NEPH</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 NEPH 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 NEPH</a> ?</p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="date_nais">Permis B obtenu 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 B 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)" />
|
||
<p class="help-block">
|
||
La date est inscrite au dos de votre permis sur la colonne 10 de la ligne Permis B</p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-xs-4 control-label" for="lieu_permis">Lieu d'obtention</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>
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-4 col-xs-8">
|
||
<input type="checkbox" name="cb_capital" id="cb_capital"> Je confirme que le capital points de mon permis de conduire est au moins égal à 1 point.</input>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-4 col-xs-8">
|
||
<input type="checkbox" name="cb_b96" id="cb_b96"> J'ai pris connaissance du fait que l'attestation B96 me permet de tracter une remorque uniquement dans le cas où le cumul du PTAC du véhicule tracteur et du PTAC de sa remorque est inférieur à 4250 Kg.</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.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">
|
||
<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/2786" 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 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',
|
||
fields: {
|
||
cb_cgv: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Veuillez accepter les Conditions Générales de Vente pour continuer.'
|
||
}
|
||
}
|
||
},
|
||
cb_b96: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Veuillez accepter les conditions concernant les limites du PTAC de la remorque.'
|
||
}
|
||
}
|
||
},
|
||
cb_capital: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: 'Un capital de points est requis pour effectuer ce stage.'
|
||
}
|
||
}
|
||
},
|
||
}
|
||
})
|
||
.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');
|
||
}
|
||
}
|
||
}
|
||
$(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>
|