<!-- les script js ci-dessous utilise des fonctions de Jquery, ne pas oublier d'inserer la dernière version de jquery donc -->
<form method="post" action="test.php" name="etat-civile">
<fieldset>
<legend>Renseignements vous concernant</legend>
<label for="nom">Nom : <sup>*</sup></label><br/>
<input name="nom" id="nom" type="text" size="24" title="Vous devez nous indiquez votre nom"/><br/>
<label for="prenom">Prénom : <sup>*</sup></label><br/>
<input type="text" name="prenom" id="prenom" size="24" title="Vous devez nous indiquez votre prénom"/><br/>
<label for="adresse">Adresse : <sup>*</sup></label><br/>
<textarea name="adresse" id="adresse" cols="22" rows="7" title="Veuillez renseigner une adresse valide"></textarea><br/>
<label for="cp">Code postal : <sup>*</sup></label><br/>
<input name="cp" id="cp" type="text" size="24" title="Vous devez nous indiquez votre code postal"/><br/>
<label for="ville">Ville : <sup>*</sup></label><br/>
<input type="text" name="ville" id="ville" size="24" title="Vous devez nous indiquez votre ville"/><br/>
<label for="tel">Tél. : </label><br/>
<input name="tel" id="tel" type="text" size="24" title="Vous devez saisir un numéro de téléphone valide"/><br/>
<label for="email">Email : </label><br/>
<input type="text" name="email" id="email" size="24" title="Vous devez saisir un email valide"/><br/>
</fieldset>
<fieldset>
<legend>Si l'acte ne vous concerne pas</legend>
<label for="concerne-autre"><input type="checkbox" id="concerne-autre" name="concerne-autre" />l'acte concerne une autre personne</label><br/>
<ol>
<li>Lien de parenté avec la personne concernée par l'acte : <br/>
<table cellpadding="6" cellspacing="0">
<tr>
<td><label for="pere-mere"><input type="radio" name="parente" id="pere-mere" checked="checked"/> Père ou mère</label></td>
<td><label for="grand-parent"><input type="radio" id="grand-parent" name="parente" /> Grand-parent</label></td>
<td><label for="enfant"><input type="radio" name="parente" id="enfant" /> Enfant</label></td>
</tr>
<tr>
<td colspan="3"><label for="autre"><input type="radio" id="autre" name="parente" value="autre" /> Autre (précisez) :</label> <input type="text" name="precise-autre" id="precise-autre" size="24" title="" /></td>
</tr>
</table>
</li>
<li>
Ses nom et prénom (nom de jeune fille pour une femme mariée)<br/>
<label for="nom-autre">Nom : </label><br/>
<input name="nom-autre" id="nom-autre" type="text" size="24" title="Vous devez nous indiquez le nom de la personne concerné par l'acte"/><br/>
<label for="prenom-autre">Prénom : </label><br/>
<input type="text" name="prenom-autre" id="prenom-autre" size="24" title="Vous devez nous indiquez le prénom de la personne concerné par l'acte"/><br/>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Nature de l'acte et nombre d'exemplaire</legend>
<table cellpadding="6" cellspacing="0">
<tr>
<td><label for="naissance"><input type="radio" id="naissance" name="nature" checked="checked"/> Naissance</label></td>
<td><label for="">Nombre d'exemplaires :</label><br/><input type="text" name="nb-exemplaire-naissance" title="vous devez indiquer le nombre d'exemplaire voulu" id="nb-exemplaire-naissance" size="24" class="numeric"/></td>
<td><label for="">Date de naissance :</label><br/><input type="text" name="date-naissance" id="date-naissance" title="vous devez saisir la date de naissance au format jj/mm/aaaa" size="24" /></td>
</tr>
<tr>
<td><label for="mariage"><input type="radio" id="mariage" name="nature" /> Mariage</label></td>
<td><label for="">Nombre d'exemplaires :</label><br/><input type="text" name="nb-exemplaire-mariage" title="vous devez indiquer le nombre d'exemplaire voulu" id="nb-exemplaire-mariage" size="24" class="numeric" /></td>
<td><label for="">Date du mariage :</label><br/><input type="text" name="date-mariage" id="date-mariage" title="vous devez saisir la date du mariage au format jj/mm/aaaa" size="24" /></td>
</tr>
<tr>
<td><label for="deces"><input type="radio" id="deces" name="nature" /> Decès</label></td>
<td><label for="">Nombre d'exemplaires :</label><br/><input type="text" name="nb-exemplaire-deces" title="vous devez indiquer le nombre d'exemplaire voulu" id="nb-exemplaire-deces" size="24" class="numeric" /></td>
<td><label for="">Date du decès :</label><br/><input type="text" name="date-deces" id="date-deces" title="vous devez saisir la date du decès au format jj/mm/aaaa" size="24" /></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Renseignements concernant les parents de la personne concernée</legend>
<strong>Père</strong><br/>
<label for="nom-pere">Nom : <sup>*</sup></label><br/>
<input name="nom-pere" id="nom-pere" type="text" size="24" title="Vous devez nous indiquez le nom du père"/><br/>
<label for="prenom-pere">Prénom : <sup>*</sup></label><br/>
<input type="text" name="prenom-pere" id="prenom-pere" size="24" title="Vous devez nous indiquez le prénom du père"/><br/>
<strong>Mère</strong><br/>
<label for="nom-mere">Nom : <sup>*</sup></label><br/>
<input name="nom-mere" id="nom-mere" type="text" size="24" title="Vous devez nous indiquez le nom de la mère"/><br/>
<label for="nom-jeune-fille-mere">Nom de jeune fille : <sup>*</sup></label><br/>
<input name="nom-jeune-fille-mere" id="nom-jeune-fille-mere" type="text" size="24" title="Vous devez nous indiquez le nom de jeune fille de la mère"/><br/>
<label for="prenom-mere">Prénom : <sup>*</sup></label><br/>
<input type="text" name="prenom-mere" id="prenom-mere" size="24" title="Vous devez nous indiquez le prénom de la mère"/><br/>
</fieldset>
<input type="submit" value="envoyer" id="etat-civile-submit"/>
</form>
<script type="text/javascript">
/****HANDCODED VERIFICATION****/
//handcoded unobstrusive javascript form verification
var EXP_num = new RegExp("^[0-9]+$");
var EXP_num_fixe = new RegExp("^0262([0-9]){6}$");
var EXP_num_portable = new RegExp("^069(2|3)([0-9]){6}$");
var EXP_cp = new RegExp("^974([0-9]){2}$");
var EXP_mail = new RegExp("^[a-z0-9._-].+@([a-z.-])+([.])([a-z]){2,4}$");
var EXP_nom = new RegExp("^[a-zA-ZéçèàêëîïôöûüâäÉÀÈËËÏÎÖÔÛÜÄÂ'-]+$");
var EXP_date = new RegExp("^[0-9]{2}/[0-9]{2}/[0-9]{4}$");
var EXP_url = new RegExp("^http://");
$("#etat-civile-submit").bind("click",function(){
var passed = true; //booleen : set to false when error encountered
$(".error").remove(); //When this function is reexecuted previous error messages is still here, this is why we need to remove all of it at first place
//verif required field and data of first fieldset
if(!EXP_nom.test($("#nom").val())){passed = false; $("#nom").after("<span class=\"error\">"+$("#nom").attr("title")+"</span>");}
if(!EXP_nom.test($("#prenom").val())){passed = false; $("#prenom").after("<span class=\"error\">"+$("#prenom").attr("title")+"</span>");}
if(!EXP_nom.test($("#adresse").val())){passed = false; $("#adresse").after("<span class=\"error\">"+$("#adresse").attr("title")+"</span>");}
if(!EXP_cp.test($("#cp").val())){passed = false; $("#cp").after("<span class=\"error\">"+$("#cp").attr("title")+"</span>");}
if(!EXP_nom.test($("#ville").val())){passed = false; $("#ville").after("<span class=\"error\">"+$("#ville").attr("title")+"</span>");}
if(!EXP_num_fixe.test($("#tel").val()) && !EXP_num_portable.test($("#tel").val()) && $("#tel").val() != ""){passed = false; $("#tel").after("<span class=\"error\">"+$("#tel").attr("title")+"</span>");}
if(!EXP_mail.test($("#email").val()) && $("#email").val() != ""){passed = false; $("#email").after("<span class=\"error\">"+$("#email").attr("title")+"</span>");}
//verif required field and data of second fieldset
if($('#concerne-autre').attr("checked") == true){
if($('#autre').attr("checked") == true){
if(!EXP_nom.test($("#precise-autre").val())){passed = false; $("#precise-autre").after("<span class=\"error\">"+$("#precise-autre").attr("title")+"</span>");}
}
if(!EXP_nom.test($("#nom-autre").val())){passed = false; $("#nom-autre").after("<span class=\"error\">"+$("#nom-autre").attr("title")+"</span>");}
if(!EXP_nom.test($("#prenom-autre").val())){passed = false; $("#prenom-autre").after("<span class=\"error\">"+$("#prenom-autre").attr("title")+"</span>");}
}
//verif required field and data of third fieldset
if($("#naissance").attr("checked") == true){
if(!EXP_num.test($("#nb-exemplaire-naissance").val())){passed = false; $("#nb-exemplaire-naissance").after("<span class=\"error\">"+$("#nb-exemplaire-naissance").attr("title")+"</span>");}
if(!EXP_date.test($("#date-naissance").val())){passed = false; $("#date-naissance").after("<span class=\"error\">"+$("#date-naissance").attr("title")+"</span>");}
}
if($("#mariage").attr("checked") == true){
if(!EXP_num.test($("#nb-exemplaire-mariage").val())){passed = false; $("#nb-exemplaire-mariage").after("<span class=\"error\">"+$("#nb-exemplaire-mariage").attr("title")+"</span>");}
if(!EXP_date.test($("#date-mariage").val())){passed = false; $("#date-mariage").after("<span class=\"error\">"+$("#date-mariage").attr("title")+"</span>");}
}
if($("#deces").attr("checked") == true){
if(!EXP_num.test($("#nb-exemplaire-deces").val())){passed = false; $("#nb-exemplaire-deces").after("<span class=\"error\">"+$("#nb-exemplaire-deces").attr("title")+"</span>");}
if(!EXP_date.test($("#date-deces").val())){passed = false; $("#date-deces").after("<span class=\"error\">"+$("#date-deces").attr("title")+"</span>");}
}
//verif required field and data of fourth fieldset
if(!EXP_nom.test($("#nom-pere").val())){passed = false; $("#nom-pere").after("<span class=\"error\">"+$("#nom-pere").attr("title")+"</span>");}
if(!EXP_nom.test($("#prenom-pere").val())){passed = false; $("#prenom-pere").after("<span class=\"error\">"+$("#prenom-pere").attr("title")+"</span>");}
if(!EXP_nom.test($("#nom-mere").val())){passed = false; $("#nom-mere").after("<span class=\"error\">"+$("#nom-mere").attr("title")+"</span>");}
if(!EXP_nom.test($("#nom-jeune-fille-mere").val())){passed = false; $("#nom-jeune-fille-mere").after("<span class=\"error\">"+$("#nom-jeune-fille-mere").attr("title")+"</span>");}
if(!EXP_nom.test($("#prenom-mere").val())){passed = false; $("#prenom-mere").after("<span class=\"error\">"+$("#prenom-mere").attr("title")+"</span>");}
//if verification passed (passed = true) the form is submit
return passed;
});
</script>
library
html (48)