Here you can find a script that removes disallowed characters from the checkout inputs.
NOTE: This script can be added only by an EvoX staff member!
At the beginning of the script, you will find variables that define the regex rules for each input field. By default, these variables are set to an empty string (""), which means no characters are removed. When a variable is set to a regex pattern, the script will automatically strip any characters that match that pattern from the corresponding input field as the user types or pastes.
Variables:
rx_user_name: The name input in the Contact Details area
rx_user_phone: The phone input in the Contact Details area
rx_address_name: The address name input in the Delivery Details area
rx_address_line_one: The address line 1 input in the Delivery Details area for Delivery addresses
rx_address_line_two: The address line 2 input in the Delivery Details area for Delivery addresses
rx_address_line_three: The address line 3 input in the Delivery Details area for Delivery addresses
rx_address_county: The address County / State input in the Delivery Details area for both Billing and Delivery addresses (when they are not a dropdown field)
rx_address_postcode: The address Postcode / Zip input in the Delivery Details area for both Billing and Delivery addresses
rx_address_delivery_note: The delivery note textarea in the Delivery Details area
rx_order_note: The order note textarea in the Review & Pay area
rx_po_number: The PO number input in the Review & Pay area
rx_alternative_po_number: The Alternative PO number input in the Review & Pay area
rx_billing_address_line_one: The address line 1 input in the Delivery Details area for Billing addresses.
rx_billing_address_line_two: The address line 2 input in the Delivery Details area for Billing addresses.
rx_billing_address_line_three: The address line 3 input in the Delivery Details area for Billing addresses.
rx_billing_address_county: The address County / State input in the Delivery Details area for Billing addresses (when they are not a dropdown field).
rx_billing_address_postcode: The address Postcode / Zip input in the Delivery Details area for Billing addresses.
Script:
Copy the following script and add it to the Footer Block in the Checkout Custom JS area of the store in Sauron
<script>
(function($){
// ===============================
// Per-field "removal" regex config
// ===============================
// Keep as "" to disable for that field.
// When enabled, set to a RegExp that MATCHES characters you want to REMOVE.
// Always prefer the /g flag (global). If omitted, we'll add it.
var rx_user_name = "";
var rx_user_phone = "";
var rx_address_name = "";
var rx_address_company_name = "";
var rx_address_line_one = "";
var rx_address_line_two = "";
var rx_address_line_three = "";
var rx_address_city = "";
var rx_address_county = "";
var rx_address_postcode = "";
var rx_address_delivery_note = "";
var rx_order_note = "";
var rx_po_number = "";
var rx_alternative_po_number = "";
var rx_billing_address_line_one = "";
var rx_billing_address_line_two = "";
var rx_billing_address_line_three= "";
var rx_billing_address_city = "";
var rx_billing_address_county = "";
var rx_billing_address_postcode = "";
var rx_billing_address_company_name = "";
// ===============================
// Field map (same structure as yours)
// ===============================
var fields = [
{ key: 'user_name', selector: '#personalDetails .checkout-guest-name input', rx: rx_user_name },
{ key: 'user_phone', selector: '#personalDetails .checkout-guest-phone input', rx: rx_user_phone },
{ key: 'address_name', selector: '#deliveryDetails .contact-name input', rx: rx_address_name },
{ key: 'address_company_name', selector: '#deliveryDetails .contact-company input', rx: rx_address_company_name },
{ key: 'address_line_one', selector: '#deliveryDetails .contact-address-line1 input', rx: rx_address_line_one },
{ key: 'address_line_two', selector: '#deliveryDetails .contact-address-line2 input', rx: rx_address_line_two },
{ key: 'address_line_three', selector: '#deliveryDetails .contact-address-line3 input', rx: rx_address_line_three },
{ key: 'address_city', selector: '#deliveryDetails .contact-city input', rx: rx_address_city },
{ key: 'address_county', selector: '#deliveryDetails .contact-state input', rx: rx_address_county },
{ key: 'address_postcode', selector: '#deliveryDetails .contact-postcode input', rx: rx_address_postcode },
{ key: 'address_delivery_note', selector: '#deliveryDetails .checkout-delivery-note-textarea', rx: rx_address_delivery_note },
{ key: 'order_note', selector: '#paymentMethod .checkout-order-note-textareas', rx: rx_order_note },
{ key: 'po_number', selector: '#paymentMethod .checkout-po-number-input', rx: rx_po_number },
{ key: 'alternative_po_number', selector: '#paymentMethod .checkout-alternative-po-number-input', rx: rx_alternative_po_number },
{ key: 'billing_address_company_name', selector: '.billing-box .contact-company input', rx: rx_billing_address_company_name },
{ key: 'billing_address_line_one', selector: '.billing-box .contact-address-line1 input', rx: rx_billing_address_line_one },
{ key: 'billing_address_line_two', selector: '.billing-box .contact-address-line2 input', rx: rx_billing_address_line_two },
{ key: 'billing_address_line_three', selector: '.billing-box .contact-address-line3 input', rx: rx_billing_address_line_three },
{ key: 'billing_address_city', selector: '.billing-box .contact-city input', rx: rx_billing_address_city },
{ key: 'billing_address_county', selector: '.billing-box .contact-state input', rx: rx_billing_address_county },
{ key: 'billing_address_postcode', selector: '.billing-box .contact-postcode input', rx: rx_billing_address_postcode }
];
// Build the delegated selector once
var watchSelectors = fields.map(function(f){ return f.selector; }).join(',');
function getRemovalPatternFor(el){
for (var i = 0; i < fields.length; i++) {
var f = fields[i];
if ($(el).is(f.selector)) {
var rx = f.rx;
if (rx && rx instanceof RegExp) {
// Ensure global flag so we remove ALL occurrences
if (!rx.global) {
// Rebuild with "g" (+ keep i/m/u if present)
var flags = 'g' +
(rx.ignoreCase ? 'i' : '') +
(rx.multiline ? 'm' : '') +
(rx.unicode ? 'u' : '') +
(rx.sticky ? 'y' : '');
rx = new RegExp(rx.source, flags);
}
return rx;
}
return null;
}
}
return null;
}
function sanitizeValue(el, pattern) {
if (!pattern) return false;
// avoid breaking IME composition
if (el.dataset && el.dataset.composing === 'true') return false;
var oldVal = el.value || '';
if (!pattern.test(oldVal)) return false; // nothing to remove
pattern.lastIndex = 0; // reset just in case
var hasSel = typeof el.selectionStart === 'number' && typeof el.selectionEnd === 'number';
var start = el.selectionStart, end = el.selectionEnd;
// Compute new value
var newVal = oldVal.replace(pattern, '');
// Adjust caret positions by removing matches in the substrings before selection
if (hasSel) {
var beforeStart = oldVal.slice(0, start).replace(pattern, '');
var beforeEnd = oldVal.slice(0, end).replace(pattern, '');
var newStart = beforeStart.length;
var newEnd = beforeEnd.length;
el.value = newVal;
try {
if (document.activeElement === el) {
el.setSelectionRange(newStart, newEnd);
}
} catch(_) {}
} else {
el.value = newVal;
}
// Re-emit input so Vue 2 v-model updates
el.dispatchEvent(new Event('input', { bubbles: true }));
return true;
}
// Track IME composition (CJK safe)
$('body').on('compositionstart', watchSelectors, function(){ this.dataset.composing = 'true'; });
$('body').on('compositionend', watchSelectors, function(){
this.dataset.composing = 'false';
sanitizeValue(this, getRemovalPatternFor(this));
});
// Sanitize on input and paste
$('body').on('input paste', watchSelectors, function(){
sanitizeValue(this, getRemovalPatternFor(this));
});
})(jQuery);
</script>
Example: Disallow tab and newline characters in the PO Number field:
var rx_po_number = /[\r\n\t]|\\[nt]/g;
Important: The variable values are regex patterns and must not be wrapped in quotes.