Add files via upload

assets/js/checkPay.js

@@ -30,6 +30,10 @@ $(document).ready(function() {
     $("#codeValid").hide();
     $("#codeInvalid").hide();
 
+    //Iconos para validar el mes y año de expiración de la tarjeta:
+    $("#dateValid").hide();
+    $("#dateInvalid").hide();
+
 	
     //Comprueba que el titular de la tarjeta es válido.
 	$("#card-holder").change(function(){
@@ -122,6 +126,37 @@ $(document).ready(function() {
         }
     });
 
+    //Comprueba que el mes de expiración de la tarjeta es válido.
+	$("#card-expiration-month").change(function(){
+        const month = $("#card-expiration-month");
+        month[0].setCustomValidity("");
+
+		if(parseInt(month.val()) > parseInt(fecha.getMonth())){
+            $("#dateValid").show();
+            $("#dateInvalid").hide();
+            month[0].setCustomValidity("");
+        } else {
+            $("#dateValid").hide();
+            $("#dateInvalid").show();
+            month[0].setCustomValidity("El mes de expiración no es válido.");
+        }
+    });
+    //Comprueba que el mes de expiración de la tarjeta es válido.
+	$("#card-expiration-year").change(function(){
+        const year = $("#card-expiration-year");
+        year[0].setCustomValidity("");
+
+		if(parseInt(year.val()) >= parseInt(fecha.getFullYear())){
+            $("#dateValid").show();
+            $("#dateInvalid").hide();
+            year[0].setCustomValidity("");
+        } else {
+            $("#dateValid").hide();
+            $("#dateInvalid").show();
+            year[0].setCustomValidity("El año de expiración no es válido.");
+        }
+    });
+
     //Comprueba el código promocional introducido:
     $("#code").change(function(){
         var url = "../assets/php/common/checkPromo.php?code=" + $("#code").val();

purchase/includes/formPurchase.php

@@ -125,7 +125,7 @@ class FormPurchase extends Form {
                                 <label for='card-cvv'>CVV: <span id='cvvValid'>&#x2714;</span><span id='cvvInvalid'>&#x274C;</span></label>
                                     <input type='text' name='card-cvv' id='card-cvv' class='fieldset-cvv' maxlength='3' placeholder='XXX' required /><pre>".$errorCVV."</pre>
                                 <br />
-                                <label for='card-expiration'>Fecha de Expiración: </label><pre>".$errorCardExpirationMonth.$errorCardExpirationYear."</pre><br />
+                                <label for='card-expiration'>Fecha de Expiración: <span id='dateValid'>&#x2714;</span><span id='dateInvalid'>&#x274C;</span></label><pre>".$errorCardExpirationMonth.$errorCardExpirationYear."</pre><br />
                                     <select name='card-expiration-month' id='card-expiration-month' required>
                                     ".$monthsHTML."
                                     </select>