templates/guest/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Registro PBA - Fundación MAPFRE{% endblock %}
  4. {% block javascripts %}
  5. <script src="https://www.google.com/recaptcha/api.js?render={{ site_key }}"></script>
  7. {% endblock %}
  9. {% block body %}
  10.     <div class="publicHeader">
  11.     <h1>Regístrate</h1>
  12.     <h3>Para poder solicitar las ayudas de Fundación MAPFRE debes registrarte a través del siguiente formulario:</h3>
  13.     {# <p><div class="formError">{{ form_errors(guest_form.document_number) }}</div></p> #}
  14.     </div>
  16.     <div class="formRegistro">
  17.         {{ form_start(guest_form) }}
  18.         <div class="row">
  19.            <div class="col-md-6">
  20.             {{ form_row(guest_form.name, {'attr': {'tabindex': '1'}}) }}
  21.             {{ form_row(guest_form.document_type, {'attr': {'tabindex': '3'}}) }}
  22.         </div>
  23.         <div class="col-md-6">
  24.             {{ form_row(guest_form.surname, {'attr': {'tabindex': '2'}}) }}
  25.             {{ form_label(guest_form.document_number) }}
  26.             {{ form_widget(guest_form.document_number, {'attr': {'tabindex': '4'}}) }}
  28.             <div id="documentError" class="formError alert alert-danger mt-1" style="display: none;">{{ form_errors(guest_form.document_number) }}</div>
  29.         </div>
  30.             
  31.         </div>
  32.         <div class="row">
  33.             <div class="col-md-12">
  34.                 
  35.                 {{ form_row(guest_form.email) }}
  37.                 <label for="guest_form_email_confirm">Repetir correo electrónico*</label>
  38.                 <input type="text" id="guest_form_email_confirm" required="required" maxlength="255">
  39.                 <div id="emailError" class="alert alert-danger mt-3" style="display: none;">Los correos electrónicos deben coincidir.</div>
  41.                 <p class="m-3 ms-0">* Campos obligatorios</p>
  42.                 <p>Fundación MAPFRE como responsable del tratamiento utilizará sus datos para la gestión y envío de nuestra revista digital, así como el envío de proyectos sociales que apoyamos, exposiciones y eventos que organizamos, o información de Fundación MAPFRE, envíos que podrán realizarse por medios electrónicos, para lo que podríamos necesitar realizar comunicaciones a terceros por obligación legal y podrán realizarse transferencias de datos a terceros países en los términos señalados en la Política de Privacidad. </p><br>
  43.                 <p>La persona interesada garantiza la exactitud y veracidad de los datos personales facilitados. En caso de que los datos se refieran a terceras personas distintas del interesado/a, garantiza haber informado y recabado el consentimiento con carácter previo a la inclusión de los datos en el presente formulario. </p><br>
  44.                     <p>Podrá ejercitar, en cualquier momento, sus derechos de acceso, rectificación, supresión, limitación, oposición o portabilidad tal y como se indica en el <a href={{ href_p }}> tratamiento de datos personales</a>.</p>
  45.                 <span class="politica">
  46.                     <input type="checkbox" name="aceptar" id="aceptar" value="aceptar" required>
  47.                     <label for="aceptar">Acepto el <a href={{ href_checkbox }}>Tratamiento de datos personales</a>.</label>
  48.                 </span>
  49.                 {{ form_row(guest_form.Enviar) }}
  51.             </div>
  52.         </div>
  53.         <input type="hidden" id="{{ guest_form._token.vars.id }}" name="{{ guest_form._token.vars.full_name }}" value="{{ guest_form._token.vars.value }}">
  55.         <div class="row">
  56.             <div class="col-md-12">
  57.                 {{ form_end(guest_form, {'render_rest': false}) }}
  58.             </div>
  59.         </div>
  61.     </div>
  63. {% endblock %}
  64. {% block extra_js %}
  65. const email = document.querySelector('#guest_form_email');
  66. const emailConfirm = document.querySelector('#guest_form_email_confirm');
  67. const emailError = document.querySelector('#emailError');
  68. const submitButton = document.querySelector('#guest_form_Enviar');
  69. const documentNumber = document.querySelector('#guest_form_document_number');
  70. var documentError = document.getElementById('documentError');
  73. const form = document.querySelector('form[name="guest_form"]');
  75. form.addEventListener('input', lockUnlockSubmitButton);
  76. emailConfirm.addEventListener('paste', function(e) {
  77.   e.preventDefault();
  78.   return false;
  79. });
  81. let emailValidationTimeoutId = null;
  83. function checkEmails() {
  84.   if (emailValidationTimeoutId !== null) {
  85.     clearTimeout(emailValidationTimeoutId); // Limpia el temporizador anterior
  86.   }
  88.   emailValidationTimeoutId = setTimeout(function() {
  89.     if (emailConfirm.value !== '') { // Solo valida si hay algo en el campo de confirmación
  90.       if (email.value !== emailConfirm.value) {
  91.         emailError.style.display = 'block';
  92.         submitButton.disabled = true;
  93.       } else {
  94.         emailError.style.display = 'none';
  95.         submitButton.disabled = false;
  96.       }
  97.     }
  98.     emailValidationTimeoutId = null; // Restablece el temporizador
  99.   }, 1000);
  100. }
  102. email.addEventListener('input', checkEmails);
  103. emailConfirm.addEventListener('input', checkEmails);
  107. document.getElementById('guest_form_document_type').addEventListener('focus', function() {
  108.   this.size = this.options.length;
  109. });
  111. document.getElementById('guest_form_document_type').addEventListener('blur', function() {
  112.   this.size = 0;
  113. });
  115. document.getElementById('guest_form_document_type').addEventListener('change', function() {
  116.     documentError.style.display = 'none';
  117. });
  119. function lockUnlockSubmitButton() {
  120.     var name = document.getElementById('guest_form_name').value;
  121.     var surname = document.getElementById('guest_form_surname').value;
  122.     var email = document.getElementById('guest_form_email').value;
  123.     var emailConfirm = document.getElementById('guest_form_email_confirm').value;
  126.   if (documentError.style.display === 'none' && emailError.style.display === 'none' && name !== '' && surname !== '' && email !== '' && emailConfirm !== '') {
  127.     submitButton.disabled = false;
  128.   } else {
  129.     submitButton.disabled = true;
  130.   }
  131. }
  133. function validateDocumentNumber() {
  134.   var value = documentNumber.value.trim();
  135.   if (value.length === 9 && !isValidDniNie(value)) { // Solo valida si hay 9 caracteres
  136.     documentError.style.display = 'block';
  137.   } else {
  138.     documentError.style.display = 'none';
  139.   }
  140. }
  142. function validateDocumentNumberOnLoad() {
  143.   var value = documentNumber.value.trim();
  144.   if (documentError.innerHTML !== "" && value.length > 0 || !isValidDniNie(value)) { // Valida si hay algún carácter
  145.     documentError.style.display = 'block';
  146.     submitButton.disabled = true;
  147.   } else {
  148.     documentError.style.display = 'none';
  149.     submitButton.disabled = false;
  150.   }
  151. }
  153. documentNumber.addEventListener('input', validateDocumentNumber);
  155. // Validación inmediata al cargar la página si hay contenido en el campo
  156. if (documentNumber.value.trim() !== "") {
  157.   validateDocumentNumberOnLoad();
  158. }
  160. function isValidDniNie(value) {
  161.   var dniPattern = /^\d{8}[A-Za-z]$/;
  162.   if (dniPattern.test(value)) {
  163.     var letters = "TRWAGMYFPDXBNJZSQVHLCKET";
  164.     var number = parseInt(value.substring(0, 8), 10);
  165.     var letter = value.charAt(8).toUpperCase();
  166.     return letter === letters.charAt(number % 23);
  167.   }
  169.   var niePattern = /^[XYZ]\d{7}[A-Za-z]$/;
  170.   if (niePattern.test(value)) {
  171.     var number = value
  172.       .replace('X', '0')
  173.       .replace('Y', '1')
  174.       .replace('Z', '2')
  175.       .substring(0, 8);
  176.     var letter = value.charAt(8).toUpperCase();
  177.     return letter === "TRWAGMYFPDXBNJZSQVHLCKET".charAt(number % 23);
  178.   }
  180.   return false;
  181. }
  183. document.addEventListener('DOMContentLoaded', function() {
  184.   grecaptcha.ready(function() {
  185.     grecaptcha.execute('{{ site_key }}', {action: 'formulario'}).then(function(token) {
  186.       // Añade un campo oculto con el token al formulario
  187.       var form = document.querySelector('form[name="guest_form"]');
  188.       if (form) { 
  189.         var input = document.createElement('input');
  190.         input.type = 'hidden';
  191.         input.name = 'g-recaptcha-response';
  192.         input.value = token;
  193.         form.appendChild(input);
  194.       } else {
  195.         console.error('Formulario no encontrado');
  196.       }
  197.     });
  198.   });
  199. });
  202. {% endblock %}