无法让正则表达式正常运行

Question

I'm currently doing some custom checkout fields for a customer using Shopify. They have got me to add a VAT field for customers using their EU site which has been working great. However, their accounts team is having issues as some customers are entering random data in. So I thought I'd try get some sort of verification system going using regex however I can't seem to get it to work. Below is my HTML code and the snippet of JS used for this check/error message.

 // VAT Field Checks $("#checkout_vat_number").on("keypress", function(evt) { var theEvent = evt || window.event; var len_val = $(this).val().length; if (theEvent.type === 'paste') { key = event.clipboardData.getData('text/plain'); } else { var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode(keyCode); } if(len_val < 11){ var regex = /^[a-zA-Z]{2}\\d{9}$/g; //Checks to make sure code is 2 letters and then 9 numbers if( !regex.test (key) ) { $("#error-for-vat-text").show(); $("#error-for-vat-text").text("Please add your 2 digit country code and 9 digit tax number"); theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } else { $("#error-for-vat-text").hide(); $("#error-for-vat-text").text(""); } } else { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } });

 <div id="checkout_vat"> <p class="section__text">Fill out your VAT number including 2 digit country code and 9 numbers, excluding any special characters.</p> <div class="fieldset" id="vat"> <div data-address-field="vat" id="vat_field" class="field field--required"> <div class="field__input-wrapper field__input-wrapper--icon-right"><label class="field__label field__label--visible" for="checkout_vat_number">VAT Number</label> <input placeholder="VAT Number" autocomplete="vat number" autocorrect="off" class="field__input field__input--numeric" aria-describedby="error-for-vat" aria-invalid="true" aria-required="true" size="30" type="text" value="" pattern=".{11,11}" name="checkout[attributes][VAT Number]" id="checkout_vat_number"> <input type="hidden" name="checkout[attributes][Agreed that responsible for any import duties/taxes and/or associated costs incurred.]" value="" id="checkout_duties_taxes_input"> </div> </div> <p class="field__message field__message--error" id="error-for-vat-text"></p> <p class="field__message field__message--error" id="error-for-vat" style="display:none;">Enter a VAT number</p> </div> </div>

I believe my regex of ^[a-zA-Z]{2}\\d{9}$/g is correct (2 letters followed by 9 numbers exactly) however I can't seem to find what else I have done wrong. Bear in mind JS is not my strong suit so something may be very wrong.
Even if there was a way to modify the String.fromCharCode to only accept 2 letters and 9 numbers but I'm not sure?

Any guidance would be appreciated.

Answer 1

Use a keyup listener. You regular expression can be simplified, but basically it's not wrong. Here's a minimal reproducable example you can work with. It uses event delegation to handle the event.

 document.addEventListener(`keyup`, handle); function handle(evt) { if (evt.target.id === `demo`) { document.querySelector(`#validate`).textContent = evt.target.value.trim().length < 1 ? `start typing...` : !/^[az]{2}\\d{9}$/i.test(evt.target.value) ? `not ready yet` : `yep, there we are!`; } }

 body { margin: 2rem; font: 12px/15px verdana, arial; }

 <div> <div>We expect 2 characters followed by 9 digits, eg AG120981212.</div> <br><input id="demo"> <span id="validate">start typing&hellip;</span> </div>