ES6箭头功能。返回给未定义

Question

我一直试图理解箭头功能。我知道函数isValidCard返回true，但是当我将isValidCard传递给validatePayment时，isValidCard变为未定义。

<form name="payment" action="#" onsubmit="return validatePayment();" method="post">
     <ul>
       <li><label for="cardid">Card Number *</label></li>
       <li><input type="number" name="cardid" id="cardid"></li>

       <li><label for="expiryid">Expiry Date *</label></li>
       <li><input type="number" name="expiryid" id="expiryid"></li>

       <li><label for="cvcid">CVC Number *</label></li>
       <li><input type="number" name="cvcid" id="cvcid"></li>

     </ul>
     <input type="submit" name="submit" value="Submit">
   </form>

let validatePayment = (isValidCard, isValidExpiry, isValidCvc) => {
 validateCard();
 alert(isValidCard);
 if (!isValidCard || !isValidExpiry || !isValidCvc) {
   alert("Payment details not accepted");
   return false;
 }
 alert("Payment details accepted");
 return true;
};

let validateCard = () => {
 const card = document.payment.cardid;
 const isValidCard = card.value.length === 10;

 if (!isValidCard) {
   alert("Card Number must be 10 numbers");
 }
 return isValidCard;
};