243 lines
8.7 KiB
XML
243 lines
8.7 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 CODE qui aura lieu : <br />
|
||
<b>${stage.date1}, ${stage.date2} et ${stage.date3},</b><br />
|
||
à : <b>${stage.lieu1}, <br />
|
||
${stage.lieu2}, ${stage.lieu3}</b>
|
||
</p>
|
||
<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">
|
||
|
||
<br />
|
||
<div class="form-group">
|
||
<label class="col-xs-3 control-label" for="civilite">Civilité</label>
|
||
<div class="col-xs-4">
|
||
<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-3 control-label" for="nom">Nom d'usage</label>
|
||
<div class="col-xs-9">
|
||
<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-3 control-label" for="prenom">Prénom(s)</label>
|
||
<div class="col-xs-9">
|
||
<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-3 control-label" for="nom">Nom de naissance</label>
|
||
<div class="col-xs-9">
|
||
<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-3 control-label" for="date_nais">Date de naissance</label>
|
||
<div class="col-xs-7">
|
||
<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-3 control-label" for="lieu_nais">Lieu de naissance</label>
|
||
<div class="col-xs-9">
|
||
<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-3 control-label" for="dept_nais">Département ou pays de naissance</label>
|
||
<div class="col-xs-7">
|
||
<input class="form-control" type="text" id="dept_nais" name="dept_nais" value="${dept_nais}" />
|
||
</div>
|
||
</div>
|
||
<!-- COORDONNÉES -->
|
||
<div class="form-group">
|
||
<label class="col-xs-3 control-label" for="adres1">Adresse</label>
|
||
<div class="col-xs-9">
|
||
<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-3 control-label" for="adres2"></label>
|
||
<div class="col-xs-9">
|
||
<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-3" for="code_postal">Code postal - Ville</label>
|
||
<div class="col-xs-7">
|
||
<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-3 control-label" for="no_tel">Téléphone portable</label>
|
||
<div class="col-xs-7">
|
||
<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-3 control-label" for="mail">Email</label>
|
||
<div class="col-xs-9">
|
||
<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>
|
||
<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-4">
|
||
<p class="form-control-static text-danger"><b>${layout.to_euro(montant)}</b></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- case a cocher "Acceptation des infos" -->
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-1 col-xs-11">
|
||
<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>
|
||
<!-- case a cocher "Acceptation des CGI" -->
|
||
<div class="form-group">
|
||
<div class="col-xs-offset-1 col-xs-11">
|
||
<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/2766" target="_blank">Conditions Générales de Vente ci-après</a>
|
||
et je valide ma réservation 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 la réservation</button>
|
||
</div>
|
||
</div>
|
||
<p><br/></p>
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!-- autocomplete plugin -->
|
||
<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.'
|
||
}
|
||
}
|
||
},
|
||
}
|
||
})
|
||
.find('[name="date_nais"], [name="obtenu_le"]').mask('00/00/0000');
|
||
|
||
$('#dept_nais').autocomplete({
|
||
source: function (request, response) {
|
||
$.ajax({
|
||
url:'/ajax_dept_nais',
|
||
dataType: 'json',
|
||
data: {
|
||
recherche: request.term,
|
||
},
|
||
success: function (data) {
|
||
response( data );
|
||
},
|
||
});
|
||
},
|
||
minLength: 2,
|
||
appendTo: "#sinscrire-form"
|
||
});
|
||
$('#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>
|