snippet 1 min read WP 5.0+

Allow Only a 10-Digit Number in an Elementor Tel Field

Restrict an Elementor telephone field to digits and validate exactly 10 numbers before the form submits.

August 14, 2025 Updated Dec 1, 2025 #elementor #wordpress #javascript #forms #snippet

This script keeps an Elementor telephone field numeric and caps it at 10 digits while the visitor types. It also validates the final length on submit.

The script

document.addEventListener("DOMContentLoaded", function () {
    const phoneInput = document.querySelector('input[type="tel"]');
    const form = document.querySelector("form.elementor-form");

    if (phoneInput) {
        phoneInput.addEventListener("input", function () {
            this.value = this.value.replace(/[^0-9]/g, "").slice(0, 10);
        });
    }

    if (form && phoneInput) {
        form.addEventListener("submit", function (event) {
            const phone = phoneInput.value.trim();

            if (phone.length !== 10) {
                event.preventDefault();
                event.stopImmediatePropagation();
                alert("Please enter a valid phone number.");
                phoneInput.focus();
            }
        });
    }
});

Add it through Elementor Custom Code, an HTML widget, or a properly enqueued theme script. If the page contains multiple telephone fields, replace the generic selector with the specific field ID or class for the field you want to validate.