aem_monespace/monaem/templates/inscriptions/passr_cde.pt

<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 <b>PASS ROUSSEAU</b> pour un montant de <b>${layout.to_euro(montant)}</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">

		<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</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="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="codpost">Code postal</label>
			<div class="col-xs-8">
					<input class="form-control" type="text" id="codpost" name="codpost" value="${codpost}"
					data-fv-notempty="true"
					data-fv-notempty-message="Le code postal est obligatoire"
					data-fv-stringlength="true"
					data-fv-stringlength-max="5"
					data-fv-stringlength-message="5 caractères maximum" />
			</div>
		</div>
				
		<div class="form-group">
			<label class="col-xs-4 control-label" for="no_tel_dom">Téléphone</label>
			<div class="col-xs-8">
				<input class="form-control phoneNumber" type="text" id="no_tel_dom" name="no_tel_dom" value="${no_tel_dom}" 
					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="Ce 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>

		<div class="form-group">
			<label class="col-xs-4 control-label" for="permis_demande">Permis souhaité</label>
			<div class="col-xs-8">
				<select class="form-control" id="permis_demande" name="permis_demande">
					<tal:block tal:repeat="item permis">
						<option value="${item.CAT}" tal:attributes="selected item.CAT == permis_demande and 'selected' or None">${item.CAT} | ${item.LIB}</option>
					</tal:block>
				</select>
			</div>
		</div>

		<!-- case a cocher "Acceptation des infos" -->
		<div class="form-group">
			<div class="col-xs-offset-1 col-xs-7">
				<div class="checkbox">
					<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>
										
		<!-- case a cocher "Acceptation des CGI" -->
		<div class="form-group">
			<div class="col-xs-offset-1 col-xs-11">
				<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/2765" 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-8">
				<button class="btn btn-primary" type="submit" name="form.submitted">
					<span class="glyphicon glyphicon-ok"></span>&nbsp;Enregistrer et régler l'inscription</button>
			</div>
		</div>
	</form>
    <br />
</div>

<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"]').mask('00/00/0000');
});
</script>

</div>
</metal:block>