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 -->
  109. <div class="col-sm-4" data-groups="solutions energies">
  110. <div class="form-label">
  111. {{ form_label(demande_form.prestation) }}
  112. </div>
  113. <div class="form-fields clearfix">
  114. {{ form_widget(demande_form.prestation) }}
  115. </div>
  116. {{ form_errors(demande_form.prestation) }}
  117. </div>
  119. <!-- <div class="col-sm-4 -->
  120. {# <div class="col-sm-4">
  121. <div class="form-label">
  122. {{ form_label(demande_form.expiration) }}
  123. </div>
  124. <div class="form-fields clearfix">
  125. {{ form_widget(demande_form.expiration) }}
  126. {{ form_errors(demande_form.expiration) }}
  127. </div>
  128. </div> #}
  130. <!-- <div class="browse-button col-sm-8 -->
  131. <!-- <div class="browse-button col-sm-8" data-groups="expertises etudes solutions energies" style="">
  132. <div class="form-label">
  133. <div class="form-label">
  134. <label for="demande_descriptionFile">Joignez un descriptif (10&nbsp;Mo max)</label>
  135. </div>
  136. </div>
  137. <div class="form-fields clearfix">
  138. <span class="browse-button row">
  139. <span class="col-md-6">
  140. <input class="hide" type="file" id="demande_descriptionFile" name="descriptionFile">
  141. <button class="browse" type="button">Parcourir</button>
  142. </span>
  143. <span class="file col-md-6">Aucun fichier sélectionné.</span>
  144. </span>
  145. </div>
  146. </div> -->
  148. <!-- <div class="col-sm-12 -->
  149. <div class="col-sm-12">
  150. <div class="form-label">
  151. {{ form_label(demande_form.comment) }}
  152. </div>
  153. <div class="form-fields clearfix">
  154. {{ form_widget(demande_form.comment) }}
  155. </div>
  156. {{ form_errors(demande_form.comment) }}
  157. </div>
  159. </div>
  160. </fieldset>
  162. <fieldset>
  163. <legend>Vous-même</legend>
  164. <div class="table-form row">
  165. {% block warning_privacy %}
  166. <p class="form-message col-sm-12">
  167. Vos données personnelles (nom, email, téléphone) ne seront pas utilisées à des fins publicitaires.
  168. </p>
  169. <p class="form-message col-sm-12">
  170. Attention, si vos informations ci-dessous sont inexactes, votre demande ne sera pas traitée.
  171. </p>
  172. {% endblock %}
  173. <div class="col-sm-4 hidden">
  174. {{ form_label(demande_form.clientStatut) }}
  175. <div class="form-fields clearfix">
  176. {{ form_widget(demande_form.clientStatut) }}
  177. {{ form_errors(demande_form.clientStatut) }}
  178. </div>
  179. </div>
  180. <div class="col-sm-4">
  181. {{ form_label(demande_form.clientNom) }}
  182. <div class="form-fields clearfix">
  183. {{ form_widget(demande_form.clientNom) }}
  184. {{ form_errors(demande_form.clientNom) }}
  185. </div>
  186. </div>
  187. <div class="col-sm-4">
  188. {{ form_label(demande_form.clientEmail) }}
  189. <div class="form-fields clearfix">
  190. {{ form_widget(demande_form.clientEmail) }}
  191. {{ form_errors(demande_form.clientEmail) }}
  192. </div>
  193. </div>
  194. <div class="col-sm-4">
  195. {{ form_label(demande_form.clientTelephone) }}
  196. <div class="form-fields clearfix">
  197. {{ form_widget(demande_form.clientTelephone) }}
  198. {{ form_errors(demande_form.clientTelephone) }}
  199. </div>
  200. </div>
  201. </div>
  202. </fieldset>
  204. <div class="row">
  205. <!-- <div class="estimation declaration">
  206. <div class="form-fields col-sm-12">
  207. <input type="checkbox" id="estimation" name="estimation" {% if demande is defined and demande.estimation %}value="on" checked{% endif %}>
  208. <label id="label_estimation" for="estimation" class=""><p>De plus, je souhaite faire estimer gratuitement mon bien par un agent immobilier<p></label>
  209. </div>
  210. </div> -->
  212. {% block warning %}
  213. <p class="form-message col-sm-12">
  214. En validant ce formulaire, j'accepte que jusqu'à 3 prestataires me contactent pour me fournir un devis gratuit.
  215. </p>
  216. {% endblock %}
  218. <p class="form-required-legend form-message col-sm-12">
  219. <span class="required form-required-mark">*</span> Champ obligatoire.
  220. </p>
  221. </div>
  223. <div class="request-form-submit clearfix row">
  224. {{ form_row(demande_form.submit, {'type': 'button', 'attr': {'onclick': 'requiredVerification()'}}) }}
  225. </div>
  227. </div>
  229. {{ form_end(demande_form) }}
  231. <script>
  232. $('#demande_clientTelephone').on('keyup', function () {
  233. var phone = $(this).val();
  234. $('#demande_clientTelephone').val(phone.replace(/[^0-9]/g, ''));
  235. });
  237. $('select#demande_categorie').removeAttr('required')
  238. var form_demande_validated = false;
  239. $("form").submit(function(e){
  240. if (!form_demande_validated) {
  241. e.preventDefault(e);
  242. requiredVerification();
  243. }
  244. });
  246. function requiredVerification() {
  247. form_demande_validated = true;
  248. $("form ul.form-errors").remove();
  250. $('#categorie select:visible, #demande_bienType').each(function () {
  251. if (!$(this).val() || $(this).val() == '') {
  252. $(this).parent(".select-background").after("<ul class='form-errors'><li>Veuillez renseigner ce champ.</li></ul>");
  253. if (form_demande_validated) {
  254. this.setCustomValidity("Veuillez renseigner ce champ.");
  255. $(this).focus();
  256. $('html, body').animate({ scrollTop: $(this).parent(".select-background").offset().top - 110}, 50);
  257. }
  258. form_demande_validated = false;
  259. } else {
  260. this.setCustomValidity("");
  261. }
  262. })
  264. if (!$('.auto_cp').val() || $('.auto_cp').val() == '' || !$('.auto_ville').val() || $('.auto_ville').val() == '') {
  265. if ($(".localisation").val() == '' || !$('.localisation').val()) {
  266. $(".localisation").after("<ul class='form-errors'><li>Veuillez renseigner ce champ.</li></ul>");
  267. } else {
  268. $(".localisation").after("<ul class='form-errors'><li>Veuillez sélectionner une ville et un code postal valides.</li></ul>");
  269. }
  270. if (form_demande_validated) {
  271. console.log('.localisation')
  272. $(".localisation").focus();
  273. $('html, body').animate({ scrollTop: $('.localisation').offset().top - 110}, 50);
  274. }
  275. form_demande_validated = false;
  276. }
  278. $("form select[required]:visible:not(#demande_bienType)").each(function () {
  279. if (!$(this).val() || $(this).val() == '') {
  280. $(this).parent(".select-background").after("<ul class='form-errors'><li>Veuillez renseigner ce champ.</li></ul>");
  281. if (form_demande_validated) {
  282. console.log("element select", this)
  283. this.setCustomValidity("Veuillez renseigner ce champ.");
  284. $(this).focus();
  285. $('html, body').animate({ scrollTop: $(this).parent(".select-background").offset().top - 110}, 50);
  286. }
  287. form_demande_validated = false;
  288. } else {
  289. this.setCustomValidity("");
  290. }
  291. })
  293. $("form input[required]:visible").each(function () {
  294. if (
  295. !$(this).is(".localisation")
  296. && (
  297. !$(this).val()
  298. || $(this).val() == ''
  299. || ($(this).is('checkbox') && !$(this).is(':checked')))
  300. )
  301. {
  302. $(this).after("<ul class='form-errors'><li>Veuillez renseigner ce champ.</li></ul>");
  303. if (form_demande_validated) {
  304. this.setCustomValidity("Veuillez renseigner ce champ.");
  305. $(this).focus();
  306. $('html, body').animate({ scrollTop: $(this).offset().top - 110}, 50);
  307. }
  308. form_demande_validated = false;
  309. } else { this.setCustomValidity(""); }
  310. });
  312. if ($("#demande_clientEmail").val() && $("#demande_clientEmail").val() != "") {
  313. var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  314. if (!regex.test($("#demande_clientEmail").val())) {
  315. $("#demande_clientEmail").after("<ul class='form-errors'><li>Veuillez saisir un email valide.</li></ul>");
  316. if (form_demande_validated) {
  317. $("#demande_clientEmail").focus();
  318. $('html, body').animate({ scrollTop: $("#demande_clientEmail").offset().top - 110}, 50);
  319. }
  320. form_demande_validated = false;
  321. }
  322. }
  324. var phone = $("#demande_clientTelephone").val();
  325. phone = phone.replaceAll(" ", "");
  326. $('#demande_clientTelephone').val(phone);
  327. phone = $("#demande_clientTelephone").val();
  329. // Supprimer les espaces et les caractères spéciaux
  330. const numeroNettoye = phone.replace(/[^0-9]/g, '');
  332. // Liste noire de numéros spécifiques (Set pour des performances optimales)
  333. const blacklist = new Set([
  334. '0000000000', '1111111111', '2222222222',
  335. '3333333333', '4444444444', '5555555555',
  336. '6666666666', '7777777777', '8888888888',
  337. '9999999999', '0123456789', '0987654321'
  338. ]);
  340. // Liste des motifs spéciaux interdits
  341. const motifsSpeciaux = [
  342. '0101010101', '0202020202', '0303030303',
  343. '0404040404', '0505050505', '0606060606',
  344. '0707070707', '0909090909'
  345. ];
  347. // Vérifier la longueur (10 chiffres)
  348. if (
  349. blacklist.has(numeroNettoye)
  350. || (numeroNettoye.length !== 0 && numeroNettoye.length !== 10)
  351. || (numeroNettoye.length !== 0 && !/^0[1-79]/.test(numeroNettoye))
  352. || motifsSpeciaux.includes(numeroNettoye)
  353. || /(\d)\1{7,}|^(\d)\1{9}$/.test(numeroNettoye)
  354. || /(\d{2})\1{3,}/.test(numeroNettoye)
  355. ) {
  356. $("#demande_clientTelephone").after("<ul class='form-errors'><li>Veuillez saisir un téléphone valide.</li></ul>");
  357. if (form_demande_validated) {
  358. $('#demande_clientTelephone').focus();
  359. $('html, body').animate({ scrollTop: $('#demande_clientTelephone').offset().top - 110}, 50);
  360. }
  361. form_demande_validated = false;
  362. }
  364. const submitButton = $("form button");
  365. if (form_demande_validated) {
  366. submitButton.prop('disabled', true);
  367. submitButton.text('Envoi en cours…');
  368. $('form').submit();
  369. }
  371. return form_demande_validated;
  372. }
  373. </script>