templates/Partial/demande_form.html.twig line 1

Open in your IDE?
  1. {% form_theme demande_form 'Form/exacompare.html.twig' %}
  2. {{ form_start(demande_form, {'attr': {'class': 'request-form form', 'enctype': "multipart/form-data"}}) }}
  3. <div class="inner-form col-sm-12">
  4. <div class="table-form request-form-field cat row">
  5. <div id="categorie" class="col-sm-12">
  6. {{ form_label(demande_form.categorie) }}
  7. <div class="form-fields clearfix">
  8. {{ form_widget(demande_form.categorie) }}
  9. {{ form_errors(demande_form.categorie) }}
  10. </div>
  11. </div>
  12. </div>
  14. <fieldset>
  15. <legend>Votre bien</legend>
  16. <div class="table-form row">
  17. <div class="col-sm-12">
  18. {{ form_label(demande_form.bienType) }}
  19. <div class="form-fields clearfix">
  20. {{ form_widget(demande_form.bienType) }}
  21. {{ form_errors(demande_form.bienType) }}
  22. </div>
  23. </div>
  24. </div>
  25. <div class="table-form row">
  26. <div class="col-sm-12">
  27. {{ form_label(demande_form.bienLocalisation) }}
  28. <div class="form-fields clearfix localisation-container">
  29. {{ form_widget(demande_form.bienLocalisation) }}
  30. {{ form_errors(demande_form.bienLocalisation) }}
  31. </div>
  32. </div>
  33. {{ form_row(demande_form.bienCodePostal, {'row_attr': {'class': 'col-sm-6'}}) }}
  34. {{ form_row(demande_form.bienVille, {'row_attr': {'class': 'col-sm-6'}}) }}
  35. </div>
  36. <div class="table-form row">
  37. <div class="col-sm-4">
  38. {{ form_label(demande_form.bienNombrePieces) }}
  39. <div class="form-fields clearfix">
  40. {{ form_widget(demande_form.bienNombrePieces) }}
  41. {{ form_errors(demande_form.bienNombrePieces) }}
  42. </div>
  43. </div>
  44. <div class="col-sm-4">
  45. {{ form_label(demande_form.bienSurface) }}
  46. <div class="form-fields clearfix">
  47. {{ form_widget(demande_form.bienSurface) }}
  48. {{ form_errors(demande_form.bienSurface) }}
  49. </div>
  50. </div>
  51. <div class="col-sm-4" data-groups="diagnostics">
  52. {{ form_label(demande_form.bienAnneeConstructionChoice) }}
  53. <div class="form-fields clearfix">
  54. {{ form_widget(demande_form.bienAnneeConstructionChoice) }}
  55. {{ form_errors(demande_form.bienAnneeConstructionChoice) }}
  56. </div>
  57. </div>
  58. <div class="col-sm-4" data-groups="expertises etudes solutions energies">
  59. {{ form_label(demande_form.bienAnneeConstructionFree) }}
  60. <div class="form-fields clearfix">
  61. {{ form_widget(demande_form.bienAnneeConstructionFree) }}
  62. </div>
  63. {{ form_errors(demande_form.bienAnneeConstructionFree) }}
  64. </div>
  65. </div>
  66. <div class="table-form row">
  67. <div class="col-sm-4">
  68. {{ form_label(demande_form.bienCopropriete) }}
  69. <div class="form-fields clearfix">
  70. {{ form_widget(demande_form.bienCopropriete) }}
  71. {{ form_errors(demande_form.bienCopropriete) }}
  72. </div>
  73. </div>
  74. <div class="col-sm-4" data-groups="diagnostics">
  75. {{ form_label(demande_form.bienGaz) }}
  76. <div class="form-fields clearfix">
  77. {{ form_widget(demande_form.bienGaz) }}
  78. {{ form_errors(demande_form.bienGaz) }}
  79. </div>
  80. </div>
  81. <div class="col-sm-4" data-groups="diagnostics">
  82. {{ form_label(demande_form.bienElectricite) }}
  83. <div class="form-fields clearfix">
  84. {{ form_widget(demande_form.bienElectricite) }}
  85. {{ form_errors(demande_form.bienElectricite) }}
  86. </div>
  87. </div>
  88. {# <div class="col-sm-8">
  89. <div class="form-label">
  90. <label for="demande_bienPhoto">Joignez une photo (10&nbsp;Mo max)</label>
  91. </div>
  92. <div class="form-fields clearfix">
  93. <span class="browse-button row">
  94. <span class="col-md-6">
  95. <input class="hide" type="file" id="demande_bienPhoto" name="bienPhoto">
  96. <button class="browse" type="button">Parcourir</button>
  97. </span>
  98. <span class="file col-md-6">Aucun fichier sélectionné.</span>
  99. </span>
  100. </div>
  101. </div> #}
  102. </div>
  103. </fieldset>
  105. <fieldset>
  106. <legend>Votre projet</legend>
  107. <div class="table-form row">
  108. <div class="col-sm-4" data-groups="solutions energies">
  109. <div class="form-label">
  110. {{ form_label(demande_form.prestation) }}
  111. </div>
  112. <div class="form-fields clearfix">
  113. {{ form_widget(demande_form.prestation) }}
  114. </div>
  115. {{ form_errors(demande_form.prestation) }}
  116. </div>
  117. {# <div class="col-sm-4">
  118. <div class="form-label">
  119. {{ form_label(demande_form.expiration) }}
  120. </div>
  121. <div class="form-fields clearfix">
  122. {{ form_widget(demande_form.expiration) }}
  123. {{ form_errors(demande_form.expiration) }}
  124. </div>
  125. </div> #}
  126. {# <div class="browse-button col-sm-8" data-groups="expertises etudes solutions energies" style="">
  127. <div class="form-label">
  128. <div class="form-label">
  129. <label for="demande_descriptionFile">Joignez un descriptif (10&nbsp;Mo max)</label>
  130. </div>
  131. </div>
  132. <div class="form-fields clearfix">
  133. <span class="browse-button row">
  134. <span class="col-md-6">
  135. <input class="hide" type="file" id="demande_descriptionFile" name="descriptionFile">
  136. <button class="browse" type="button">Parcourir</button>
  137. </span>
  138. <span class="file col-md-6">Aucun fichier sélectionné.</span>
  139. </span>
  140. </div>
  141. </div> #}
  142. <div class="col-sm-12">
  143. <div class="form-label">
  144. {{ form_label(demande_form.comment) }}
  145. </div>
  146. <div class="form-fields clearfix">
  147. {{ form_widget(demande_form.comment) }}
  148. </div>
  149. {{ form_errors(demande_form.comment) }}
  150. </div>
  151. </div>
  152. </fieldset>
  154. <fieldset>
  155. <legend>Vous-même</legend>
  156. <div class="table-form row">
  157. {% block warning_privacy %}
  158. <p class="form-message col-sm-12">
  159. Vos données personnelles (nom, email, téléphone) ne seront pas utilisées à des fins publicitaires.
  160. </p>
  161. <p class="form-message col-sm-12">
  162. Attention, si vos informations ci-dessous sont inexactes, votre demande ne sera pas traitée.
  163. </p>
  164. {% endblock %}
  165. <div class="col-sm-4 hidden">
  166. {{ form_label(demande_form.clientStatut) }}
  167. <div class="form-fields clearfix">
  168. {{ form_widget(demande_form.clientStatut) }}
  169. {{ form_errors(demande_form.clientStatut) }}
  170. </div>
  171. </div>
  172. <div class="col-sm-4">
  173. {{ form_label(demande_form.clientNom) }}
  174. <div class="form-fields clearfix">
  175. {{ form_widget(demande_form.clientNom) }}
  176. {{ form_errors(demande_form.clientNom) }}
  177. </div>
  178. </div>
  179. <div class="col-sm-4">
  180. {{ form_label(demande_form.clientEmail) }}
  181. <div class="form-fields clearfix">
  182. {{ form_widget(demande_form.clientEmail) }}
  183. {{ form_errors(demande_form.clientEmail) }}
  184. </div>
  185. </div>
  186. <div class="col-sm-4">
  187. {{ form_label(demande_form.clientTelephone) }}
  188. <div class="form-fields clearfix">
  189. {{ form_widget(demande_form.clientTelephone) }}
  190. {{ form_errors(demande_form.clientTelephone) }}
  191. </div>
  192. </div>
  193. </div>
  194. </fieldset>
  196. <div class="row">
  197. {# <div class="estimation declaration">
  198. <div class="form-fields col-sm-12">
  199. <input type="checkbox" id="estimation" name="estimation" {% if demande is defined and demande.estimation %}value="on" checked{% endif %}>
  200. <label id="label_estimation" class=""><p>De plus, je souhaite faire estimer gratuitement mon bien par un agent immobilier</p></label>
  201. </div>
  202. </div> #}
  204. {% block warning %}
  205. <p class="form-message col-sm-12">
  206. En validant ce formulaire, j'accepte que jusqu'à 3 prestataires me contactent pour me fournir un devis gratuit.
  207. </p>
  208. {% endblock %}
  210. <p class="form-required-legend form-message col-sm-12">
  211. <span class="required form-required-mark">*</span> Champ obligatoire.
  212. </p>
  213. </div>
  214. <div class="request-form-submit clearfix row">
  215. {{ form_row(demande_form.submit, {'type': 'button', 'attr': {'onclick': 'requiredVerification()'}}) }}
  216. </div>
  217. </div>
  219. {{ form_end(demande_form) }}
  221. <script>
  222. {# $('#demande_clientTelephone').on('keyup', function () {
  223. var phone = $(this).val();
  224. $('#demande_clientTelephone').val(phone.replace(/[^0-9]/g, ''));
  225. }); #}
  227. $('select#demande_categorie').removeAttr('required')
  228. var form_demande_validated = false;
  229. $("form").submit(function(e){
  230. if (!form_demande_validated) {
  231. e.preventDefault(e);
  232. requiredVerification();
  233. }
  234. });
  236. function requiredVerification() {
  237. form_demande_validated = true;
  238. $("form ul.form-errors").remove();
  240. $('#categorie select:visible, #demande_bienType').each(function () {
  241. if (!$(this).val() || $(this).val() == '') {
  242. $(this).parent(".select-background").after("<ul class='form-errors'><li>Veuillez renseigner ce champ.</li></ul>");
  243. if (form_demande_validated) {
  244. this.setCustomValidity("Veuillez renseigner ce champ.");
  245. $(this).focus();
  246. $('html, body').animate({ scrollTop: $(this).parent(".select-background").offset().top - 110}, 50);
  247. }
  248. form_demande_validated = false;
  249. } else {
  250. this.setCustomValidity("");
  251. }
  252. })
  254. if (!$('.auto_cp').val() || $('.auto_cp').val() == '' || !$('.auto_ville').val() || $('.auto_ville').val() == '') {
  255. if ($(".localisation").val() == '' || !$('.localisation').val()) {
  256. $(".localisation").after("<ul class='form-errors'><li>Veuillez renseigner ce champ.</li></ul>");
  257. } else {
  258. $(".localisation").after("<ul class='form-errors'><li>Veuillez sélectionner une ville et un code postal valides.</li></ul>");
  259. }
  260. if (form_demande_validated) {
  261. console.log('.localisation')
  262. $(".localisation").focus();
  263. $('html, body').animate({ scrollTop: $('.localisation').offset().top - 110}, 50);
  264. }
  265. form_demande_validated = false;
  266. }
  268. $("form select[required]:visible:not(#demande_bienType)").each(function () {
  269. if (!$(this).val() || $(this).val() == '') {
  270. $(this).parent(".select-background").after("<ul class='form-errors'><li>Veuillez renseigner ce champ.</li></ul>");
  271. if (form_demande_validated) {
  272. console.log("element select", this)
  273. this.setCustomValidity("Veuillez renseigner ce champ.");
  274. $(this).focus();
  275. $('html, body').animate({ scrollTop: $(this).parent(".select-background").offset().top - 110}, 50);
  276. }
  277. form_demande_validated = false;
  278. } else {
  279. this.setCustomValidity("");
  280. }
  281. })
  283. $("form input[required]:visible").each(function () {
  284. if (
  285. !$(this).is(".localisation")
  286. && (
  287. !$(this).val()
  288. || $(this).val() == ''
  289. || ($(this).is('checkbox') && !$(this).is(':checked')))
  290. )
  291. {
  292. $(this).after("<ul class='form-errors'><li>Veuillez renseigner ce champ.</li></ul>");
  293. if (form_demande_validated) {
  294. this.setCustomValidity("Veuillez renseigner ce champ.");
  295. $(this).focus();
  296. $('html, body').animate({ scrollTop: $(this).offset().top - 110}, 50);
  297. }
  298. form_demande_validated = false;
  299. } else { this.setCustomValidity(""); }
  300. });
  302. if ($("#demande_clientEmail").val() && $("#demande_clientEmail").val() != "") {
  303. var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  304. if (!regex.test($("#demande_clientEmail").val())) {
  305. $("#demande_clientEmail").after("<ul class='form-errors'><li>Veuillez saisir un email valide.</li></ul>");
  306. if (form_demande_validated) {
  307. $("#demande_clientEmail").focus();
  308. $('html, body').animate({ scrollTop: $("#demande_clientEmail").offset().top - 110}, 50);
  309. }
  310. form_demande_validated = false;
  311. }
  312. }
  314. var phone = $("#demande_clientTelephone").val();
  315. phone = phone.replaceAll(" ", "");
  316. $('#demande_clientTelephone').val(phone);
  317. phone = $("#demande_clientTelephone").val();
  319. // Supprimer les espaces et les caractères spéciaux
  320. const numeroNettoye = phone.replace(/[^0-9]/g, '');
  322. // Liste noire de numéros spécifiques (Set pour des performances optimales)
  323. const blacklist = new Set([
  324. '0000000000', '1111111111', '2222222222',
  325. '3333333333', '4444444444', '5555555555',
  326. '6666666666', '7777777777', '8888888888',
  327. '9999999999', '0123456789', '0987654321'
  328. ]);
  330. // Liste des motifs spéciaux interdits
  331. const motifsSpeciaux = [
  332. '0101010101', '0202020202', '0303030303',
  333. '0404040404', '0505050505', '0606060606',
  334. '0707070707', '0909090909'
  335. ];
  337. // Vérifier la longueur (10 chiffres)
  338. if (
  339. blacklist.has(numeroNettoye)
  340. || (numeroNettoye.length !== 0 && numeroNettoye.length !== 10)
  341. || (numeroNettoye.length !== 0 && !/^0[1-79]/.test(numeroNettoye))
  342. || motifsSpeciaux.includes(numeroNettoye)
  343. || /(\d)\1{7,}|^(\d)\1{9}$/.test(numeroNettoye)
  344. || /(\d{2})\1{3,}/.test(numeroNettoye)
  345. ) {
  346. $("#demande_clientTelephone").after("<ul class='form-errors'><li>Veuillez saisir un téléphone valide.</li></ul>");
  347. if (form_demande_validated) {
  348. $('#demande_clientTelephone').focus();
  349. $('html, body').animate({ scrollTop: $('#demande_clientTelephone').offset().top - 110}, 50);
  350. }
  351. form_demande_validated = false;
  352. }
  354. const submitButton = $("form button");
  355. if (form_demande_validated) {
  356. submitButton.prop('disabled', true);
  357. submitButton.text('Envoi en cours…');
  358. $('form').submit();
  359. }
  361. return form_demande_validated;
  362. }
  363. </script>