Merge pull request #56 from paolofajardo/verificaciones-carrito

Verificaciones para campos de ingreso de datos

cart.html

@@ -183,6 +183,7 @@ <h4 class="modal-title">Forma de Pago</h4>
                                   <label for="expirationDate">Vencimiento (MM/AA):</label>
                                   <input type="text" id="expirationDate" class="form-control py-2 payment-field" pattern="\d{2}/\d{2}" required>
                                 </div>
+
                               </div>
                             </div>
                           </div>

js/cart.js

@@ -266,6 +266,34 @@ function disablePaymentFields(fieldGroup) {
   });
 }
 
+  // Obtén el elemento de entrada
+  const expirationDateInput = document.getElementById("expirationDate");
+
+  // Agrega un event listener para el evento "input"
+  expirationDateInput.addEventListener("input", function() {
+    // Elimina cualquier carácter que no sea un dígito
+    this.value = this.value.replace(/\D/g, "");
+
+    // Asegúrate de que no haya más de 4 caracteres
+    if (this.value.length > 4) {
+      this.value = this.value.slice(0, 4);
+    }
+
+    // Agrega la barra "/" después de los primeros 2 caracteres del mes
+    if (this.value.length >= 2) {
+      this.value = this.value.slice(0, 2) + "/" + this.value.slice(2);
+    }
+  });
+
+  // Agrega un event listener para el evento "change"
+  expirationDateInput.addEventListener("change", function() {
+    // Verifica si el campo tiene exactamente 4 caracteres
+    if (this.value.length !== 5) {
+      alert("El campo debe tener 4 caracteres (MM/AA).");
+      this.value = "";
+    }
+  });
+
 
 setInterval(precioFinal, 100);
 setInterval(calcularEnvio, 100);