function digitValidate(ele){ ele.value = ele.value.replace(/[^0-9]/g,''); } function tabChange(val){ let totalLength = 0; let ele = document.querySelectorAll('.digitInput'); ele.forEach((element) =>  {totalLength += element.value.length}); console.log(totalLength); let submitButton = document.querySelector('#submitButton');  if (totalLength === 4) {submitButton.disabled = false} else {submitButton.disabled = true};   if(ele[val-1].value != ''){ ele[val].focus() }else if(ele[val-1].value == ''){ ele[val-2].focus() }  } const modalHTML = ` <div id='myModal' class='modal' style='display: none; position: fixed; top: 25%; left: 38%; display: none; width: 25%; height: 400px; overflow-x: hidden; overflow-y: auto; outline: 0;'> <div class='modal-content bgWhite'> <div class='container' style='width: 100%; height: 100%; position: fixed; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: center;'> <div class='row justify-content-md-center' id='purpleContainer' style='background-color: rgb(244, 246, 253, 1.9); border-style: solid; border-width: 1px; border-color: rgb(128, 100, 230); border-radius: 0.75rem;'> <div class='text-center'> <div class='row'> <div class='col-sm-12'> <div class='timer-container pt-4' style='justify-content: flex-end; align-items: center; color: red; font-weight:600; font-size:12px; display: none;' id='timer-container'> <div>RESEND <span id='timer'></span></div> </div> <div class='title' style='font-weight:600; margin-top:20px; font-size:24px;color: rgb(92, 45, 145);'>Enter OTP</div> <div class='subtitle' style='font-weight:600; font-size:18px;color: rgb(92, 45, 145);' >Check your SMS's for OTP</div> <form action='' class='mt-3' id='otp-form' style='width: 460px;'> <input class='otp digitInput' style='display:inline-block;width:50px;height:50px;text-align:center; margin-right:12px; margin-bottom:5px;' type='text' oninput='digitValidate(this)' onkeyup='tabChange(1)' maxlength=1> <input class='otp digitInput' style='display:inline-block;width:50px;height:50px;text-align:center; margin-right:12px; margin-bottom:5px;' type='text' oninput='digitValidate(this)' onkeyup='tabChange(2)' maxlength=1> <input class='otp digitInput' style='display:inline-block;width:50px;height:50px;text-align:center; margin-right:12px; margin-bottom:5px;' type='text' oninput='digitValidate(this)' onkeyup='tabChange(3)' maxlength=1> <input style='display:inline-block;width:50px;height:50px;text-align:center; margin-right:12px; margin-bottom:5px;' class='otp digitInput' type='text' oninput='digitValidate(this)' onkeyup='tabChange(4)' maxlength=1> </form> <button id='submitButton' disabled class='btn mt-4 mb-1 customBtn' onclick='verifyOTP()' style='color: white;width: 50%; margin-top: 15px; border-style: solid; border-width: 1px; border-color: rgb(128, 100, 230); border-radius: 0.75rem; background: linear-gradient(rgb(132, 75, 197), rgb(125, 119, 255)); box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 4px;'>Submit</button> <div class='resend mb-4' id='resendBtn' style='font-weight:600;font-size:12px;color: red;cursor: pointer;'>RESEND</div> <div class='resend mb-4' id='invalidOTPResendBtn' style='font-weight:600;font-size:12px;color: rgb(92, 45, 145);display:none'> <span id='errorMessage' style='font-weight:600;font-size:12px;color: rgb(92, 45, 145);'></span> CLICK <span id='resendSecond' style='font-weight:600;font-size:12px;color: red;cursor: pointer;'>RESEND</span> TO RECEIVE A NEW OTP </div> <div class='resend mb-4' id='maximumAttempts' style='white-space: normal; text-align: center; max-width: 450px;font-weight:600;font-size:12px;color: rgb(92, 45, 145);display:none'> YOU HAVE REACHED THE MAXIMUM NUMBER OF ATTEMPTS, YOU WILL NOW BE REDIRECTED TO THE REGISTRATION PAGE </div> </div> </div> </div> </div> </div> </div> </div>`;     const tempContainer = document.createElement('div'); tempContainer.innerHTML = modalHTML; const modal = tempContainer.querySelector('.modal'); window.openOTPModal = function() { modal.style.display = 'flex'; }; window.closeModal = function() { modal.style.display = 'none'; }; document.body.appendChild(modal); var bgWhtite = document.querySelector('.bgWhite'); bgWhtite.style.cssText = 'background:transparent; border: none;';