Ошибка кредитной карты Javascript и подтверждение валидации

Question

Дело в том, что я уже понял (просто скопируйте/вставьте некоторые коды из stackoverflow). Но то, что имеет значение только для меня; Всякий раз, когда я вводим номер cc и попадает в «Tab», он автоматически проверяет истечение срока действия. Я использовал атрибут onchange для 2 ящиков. Пожалуйста, помогите мне настроить мои коды.

Что я хотел бы для исхода ..

-Когда я введите номер куб.см, и нажмите «Tab» в OnChange атрибут куб.см текстового поля [проверяет его] и еще не подтверждения Действительно текстовое поле [еще не проверки].

Я пробовал все, но это только заставляет его не работать .. он .. Мне жаль, ребята, им не очень хорошо создавать javascripts. Спасибо.

Javascript

<!-- START: VALIDATION IN CREDIT CARDS --> 
<script type="text/javascript"> 


//START: FOR CREDIT CARD NUMBER 

    function validateCard(card_no){ 

     var Check_MasterCard = /^([51|52|53|54|55]{2})([0-9]{14})$/; 
     var Check_Visa = /^([4]{1})([0-9]{12,15})$/; 

     if(Check_Visa.test(card_no)){ 
      document.getElementById('cardSuccess').style.display = "block"; 
      document.getElementById('cardSuccess_1').style.display = "none"; 
      document.getElementById('cardError').style.display = "none"; 
      return true; 
     }else if(Check_MasterCard.test(card_no)){ 
      document.getElementById('cardSuccess_1').style.display = "block"; 
      document.getElementById('cardSuccess').style.display = "none"; 
      document.getElementById('cardError').style.display = "none"; 
      return true; 
     }else{ 
      document.getElementById('cardError').style.display = "block"; 
      document.getElementById('cardSuccess_1').style.display = "none"; 
      document.getElementById('cardSuccess').style.display = "none"; 
      return false; 
     } 

    } 

//END: FOR CREDIT CARD NUMBER 

    function validateForm(){ 
     // Set error catcher 
     var error = 0; 

     // Validate Credit Card 
     if(!validateCard(document.getElementById('card_no').value)){ 

      error++; 
     } 

     if(error > 0){ 
      return false; 
     } 

     //FOR EXPIRY VALIDATION 
     var datereg = /^(0[1-9]|1[012])[- /.](19|20)\d\d+$/; 
     if (!datereg.test(document.getElementById('credit_card_exp').value)) { 
      document.getElementById("expiry_error1").style.display="block"; 
      document.getElementById("expiry_error").style.display="none"; 
      return false; 
     } 

     var currentDate = new Date(); //this returns the current datetime 
     //Clear all the other date parts. 
     currentDate.setDate(0); 
     currentDate.setHours(0); 
     currentDate.setMinutes(0); 
     currentDate.setSeconds(0); 
     currentDate.setMilliseconds(0); 

     var year = parseInt(payment_form.credit_card_exp.value.split('/')[1]); 
     var month = parseInt(payment_form.credit_card_exp.value.split('/')[0]); 

     var dateToCheck = new Date(year,month,0,0,0,0,0); 

     if (dateToCheck.getTime() < currentDate.getTime()){ 
      //invalid date 
      document.getElementById("expiry_error").style.display="block"; 
      document.getElementById("expiry_error1").style.display="none"; 
      return false; 
     } 

     document.getElementById("expiry_error").style.display="none"; 
     document.getElementById("expiry_error1").style.display="none"; 
     return true; 
     //END FOR EXPIRY VALIDATION 
    } 


</script> 
<!-- END: VALIDATION IN CREDIT CARDS --> 

HTML:

<form id='payment_form' name="payment_form" method="post" action="exec_order_process.php" onsubmit="return validateForm();"> 
Card Number* 
<input class="form-control" onchange="return validateForm();" name="card_no" id="card_no" type="text" maxlength="16" required="required" placeholder="Enter Card number" > 

<span class="alert alert-danger changeFont" id="cardError" style="display: none;">You must enter a valid Credit Card for VISA and MasterCard Only<span class="glyphicon glyphicon-remove"></span></span> 
<span class="alert alert-success changeFont" id="cardSuccess" style="display: none;">This is a VISA card <span class="glyphicon glyphicon-ok"></span></span> 
<span class="alert alert-success changeFont" id="cardSuccess_1" style="display: none;">This is a MasterCard <span class="glyphicon glyphicon-ok"></span></span> 

Expiration* 
<input onchange="return validateForm();" class="form-control" name="credit_card_exp" id="credit_card_exp" type="text" maxlength="7" onchange="validCCForm(this);" required placeholder="MM/YYYY "> 

<label class="error" id="expiry_error" style="display: none;">Credit Card Expired</label> 
<label class="error" id="expiry_error1" style="display: none;">Enter valid Date Format</label> 

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

Answer 1

Вы должны создать 2 функции Javascript:

validateCreditCard и validateExpiration

Затем вы можете использовать функцию validateCreditCard на вас ввод кредитной карты (при изменении) и validateExpir на входе ввода.

Вы все еще можете сохранить функцию validateForm, но эта функция просто вызовет другие 2 функции, чтобы все входы были проверены (вы можете использовать ее, например, перед отправкой).

Answer 2

Причина, по которой дата истечения срока действия проверяется, когда элемент ввода номера карточки теряет фокус, заключается в том, что атрибут onchange этого элемента вызывает ValidateForm(), в котором вы проверяете дату истечения срока действия.

1. Реорганизовать код проверки срока годности на уникальную функцию (Одиночная ответственность).
2. Удалить дубликат OnChange атрибут из входного элемента credit_card_exp HTML
3. реорганизовать OnChange атрибуты ваших входных элементов следующим образом:

<label>Card Number*</label> 
 
<input onchange="validateCardNumber(this.value)" class="form-control" name="card_no" id="card_no" type="text" maxlength="16" required="required" placeholder="Enter Card number" /> 
 
<label>Expiration*</label> 
 
<input onchange="validateExpirationDate(this.value)" class="form-control" name="credit_card_exp" id="credit_card_exp" type="text" maxlength="7" required placeholder="MM/YYYY " />​

Вы можете как просмотреть HTML onchange Attribute и JavaScript/HTML Event страниц на веб-сайте w3Schools.com для уточнения.