जावास्क्रिप्ट नौसिखिया हूँ, और मुझे कुछ मदद चाहिए थी।

उपरोक्त स्क्रिप्ट वैध और अमान्य क्रेडिट कार्ड/डेबिट को मान्य कर सकती है

मेरी समस्या यह है कि, जब उपयोगकर्ता ने फिर से कार्ड टाइप करना शुरू कर दिया है, तो मैं "अमान्य क्रेडिट/डेबिट कार्ड नंबर" त्रुटि संदेश कैसे साफ़ कर सकता हूं

ऐसा लगता है कि जब उपयोगकर्ता फिर से टाइप करता है तो मैं त्रुटि संदेश को स्वतः साफ़ करना चाहता हूं

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            
        </style>
    </head>
    <body>
        <h2>Payment
      <img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png">
      <img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png">
      <img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png">
      <img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png">
    </h2>
    <div class="form-group">
      <label for="name-on-card">Name on Card</label>
      <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
    </div>
    <div class="form-group">
      <label for="cc-number">Credit card number</label>
      <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20">
      <span id="loginError"></span>
    </div>
    <!--<div class="">
      <select class="month_year_select" name="month" id="month">
        <option value="">exp month</option>
      </select>
    </div>
    <div class="">
      <select class="month_year_select" id="year" name="year">
        <option value="">exp year</option>
      </select>
    </div>-->
    <div class="CVV">
      <label for="cc-cvv">CVV</label>
      <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
    </div>
       <script type="text/javascript">
        document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way
document.getElementById('cc_number').onchange = creditCheck; //it is OK too

function CWcheck() { //function name should conventionally start with lower case but isn't big deal
  //"this" is the element which fired the event
  if (!/^\d{3,4}$/.test(this.value)) {
    this.value = '';
    this.focus();
    alert('CVV is 3 or 4 digits');
  }
}

function creditCheck() {
  // hide cc logos
  var ccImgs = document.querySelectorAll('h2 img');
  for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) {
    ccImg.style.visibility = 'hidden';
  }
  var ccNum = this.value.replace(/\D/g, ''); //remove all non-digits
  if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) {
    document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
    this.focus();
    return false;
  }
  //implement Luhn algorithm
  var check = ccNum.split('') //get array
    .reverse()
    .map(function(el, index) {
      return el * (index % 2 + 1); //multiply even positions by 2
    })
    .join('') //combine array of strings
    .split('')
    .reduce(function(a, b) { //sum digits
      return a + (b - 0);
    }, 0);
  if (!check || (check % 10)) { //checksum should be none-zero and dividable by 10
    document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
    this.focus();
    return false;
  }
  //test passed. show card logo
  if (/^5[1-5]/.test(ccNum))
    document.querySelector('h2 img.mastercard').style.visibility = 'visible';
  else if (/^4/.test(ccNum))
    document.querySelector('h2 img.visacard').style.visibility = 'visible';
  else if (ccNum.length == 15 && /^3[47]/.test(ccNum))
    document.querySelector('h2 img.amexcard').style.visibility = 'visible';
  else if (/^6011/.test(ccNum))
    document.querySelector('h2 img.discovercasd').style.visibility = 'visible';
  //and so on
  else {
    document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
    this.focus();
    return false;
  }

  //test passed. format the string
  this.value = ccNum
    .replace(/^(\d{4})(\d{4})(\d{4})(\d+)$/, '$1 $2 $3 $4');
}
    </script>
    </body>
    </html>
0
Jeff Docm 21 अप्रैल 2021, 13:01

3 जवाब

सबसे बढ़िया उत्तर

मैंने इनपुट में एक input ईवेंट श्रोता जोड़ा है, और इनपुट में मौजूद टेक्स्ट की लंबाई के आधार पर, मैं त्रुटि संदेश साफ़ करता हूं (यदि इसकी लंबाई 0 से अधिक है, तो उपयोगकर्ता ने फिर से टाइप करना शुरू कर दिया है।)

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
</head>

<body>
  <h2>Payment
    <img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png">
    <img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png">
    <img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png">
    <img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png">
  </h2>
  <div class="form-group">
    <label for="name-on-card">Name on Card</label>
    <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
  </div>
  <div class="form-group">
    <label for="cc-number">Credit card number</label>
    <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20">
    <span id="loginError"></span>
  </div>
  <!--<div class="">
      <select class="month_year_select" name="month" id="month">
        <option value="">exp month</option>
      </select>
    </div>
    <div class="">
      <select class="month_year_select" id="year" name="year">
        <option value="">exp year</option>
      </select>
    </div>-->
  <div class="CVV">
    <label for="cc-cvv">CVV</label>
    <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
  </div>
  <script type="text/javascript">
    document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way
    document.getElementById('cc_number').onchange = creditCheck; //it is OK too

    function CWcheck() { //function name should conventionally start with lower case but isn't big deal
      //"this" is the element which fired the event
      if (!/^\d{3,4}$/.test(this.value)) {
        this.value = '';
        this.focus();
        alert('CVV is 3 or 4 digits');
      }
    }

    function creditCheck() {
      // hide cc logos
      var ccImgs = document.querySelectorAll('h2 img');
      for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) {
        ccImg.style.visibility = 'hidden';
      }
      var ccNum = this.value.replace(/\D/g, ''); //remove all non-digits
      if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) {
        document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
        this.focus();
        return false;
      }
      //implement Luhn algorithm
      var check = ccNum.split('') //get array
        .reverse()
        .map(function(el, index) {
          return el * (index % 2 + 1); //multiply even positions by 2
        })
        .join('') //combine array of strings
        .split('')
        .reduce(function(a, b) { //sum digits
          return a + (b - 0);
        }, 0);
      if (!check || (check % 10)) { //checksum should be none-zero and dividable by 10
        document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
        this.focus();
        return false;
      }
      //test passed. show card logo
      if (/^5[1-5]/.test(ccNum))
        document.querySelector('h2 img.mastercard').style.visibility = 'visible';
      else if (/^4/.test(ccNum))
        document.querySelector('h2 img.visacard').style.visibility = 'visible';
      else if (ccNum.length == 15 && /^3[47]/.test(ccNum))
        document.querySelector('h2 img.amexcard').style.visibility = 'visible';
      else if (/^6011/.test(ccNum))
        document.querySelector('h2 img.discovercasd').style.visibility = 'visible';
      //and so on
      else {
        document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
        this.focus();
        return false;
      }

      //test passed. format the string
      this.value = ccNum
        .replace(/^(\d{4})(\d{4})(\d{4})(\d+)$/, '$1 $2 $3 $4');
    }

    document.querySelector("#cc_number").addEventListener("input", function() {
      if (document.querySelector("#cc_number").value.length > 0) {
        document.getElementById("loginError").innerHTML = "";
      }
    })
  </script>
</body>

</html>
0
TechySharnav 21 अप्रैल 2021, 13:19

आपके कोड के आधार पर, मैं आपके ईवेंट हैंडलर में त्रुटि संदेश को साफ़ करने के लिए एक पंक्ति जोड़ने का सुझाव दूंगा:

document.getElementById('cc-cvv').addEventListener('change', function() {
    document.getElementById("loginError").innerHTML = "";
    CWcheck();
});

यह संदेश को हर बार कीस्ट्रोक पढ़ने पर एक खाली स्ट्रिंग पर रीसेट कर देगा। चेक के अमान्य होने पर यह त्रुटि संदेश भी दिखाएगा।

उम्मीद है कि यह मदद करता है।

0
Ortund 21 अप्रैल 2021, 13:12

ऐसा करने के कई तरीके हैं। अपने वर्तमान सेटअप के साथ आप आंतरिक HTML जोड़ने के बजाय त्रुटि दिखाने और छिपाने के लिए कक्षा का उपयोग कर सकते हैं। प्रत्येक परिवर्तन के बाद इस वर्ग को हटाया जा सकता है। आपके कोड के साथ उदाहरण, संलग्न।

document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way
document.getElementById('cc_number').onchange = creditCheck; //it is OK too

function CWcheck() { //function name should conventionally start with lower case but isn't big deal
  //"this" is the element which fired the event
  if (!/^\d{3,4}$/.test(this.value)) {
    this.value = '';
    this.focus();
    alert('CVV is 3 or 4 digits');
  }
}

function creditCheck() {
   document.getElementById("loginError").classList.remove('card-error--active')
  
  // hide cc logos
  var ccImgs = document.querySelectorAll('h2 img');
  for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) {
    ccImg.style.visibility = 'hidden';
  }
  var ccNum = this.value.replace(/\D/g, ''); //remove all non-digits
  if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) {
     document.getElementById("loginError").classList.add('card-error--active')
    this.focus();
    return false;
  }
  //implement Luhn algorithm
  var check = ccNum.split('') //get array
    .reverse()
    .map(function(el, index) {
      return el * (index % 2 + 1); //multiply even positions by 2
    })
    .join('') //combine array of strings
    .split('')
    .reduce(function(a, b) { //sum digits
      return a + (b - 0);
    }, 0);
  if (!check || (check % 10)) { //checksum should be none-zero and dividable by 10
    document.getElementById("loginError").classList.add('card-error--active')
    this.focus();
    return false;
  }
  //test passed. show card logo
  if (/^5[1-5]/.test(ccNum))
    document.querySelector('h2 img.mastercard').style.visibility = 'visible';
  else if (/^4/.test(ccNum))
    document.querySelector('h2 img.visacard').style.visibility = 'visible';
  else if (ccNum.length == 15 && /^3[47]/.test(ccNum))
    document.querySelector('h2 img.amexcard').style.visibility = 'visible';
  else if (/^6011/.test(ccNum))
    document.querySelector('h2 img.discovercasd').style.visibility = 'visible';
  //and so on
  else {
    document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
    this.focus();
    return false;
  }

  //test passed. format the string
  this.value = ccNum
    .replace(/^(\d{4})(\d{4})(\d{4})(\d+)$/, '$1 $2 $3 $4');
}
.card-error{
  display:none;
}

.card-error--active{
  display:block;
}
 <!DOCTYPE html>
    <html>
    <head>
        <style>
            
        </style>
    </head>
    <body>
        <h2>Payment
      <img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png">
      <img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png">
      <img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png">
      <img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png">
    </h2>
    <div class="form-group">
      <label for="name-on-card">Name on Card</label>
      <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
    </div>
    <div class="form-group">
      <label for="cc-number">Credit card number</label>
      <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20">
      <span id="loginError" class="card-error">invalid credit / debit card number</span>
    </div>
    <!--<div class="">
      <select class="month_year_select" name="month" id="month">
        <option value="">exp month</option>
      </select>
    </div>
    <div class="">
      <select class="month_year_select" id="year" name="year">
        <option value="">exp year</option>
      </select>
    </div>-->
    <div class="CVV">
      <label for="cc-cvv">CVV</label>
      <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
    </div>
    
    </body>
    </html>
0
Stephen Baker 21 अप्रैल 2021, 13:17