Real-time Format Validation

Smart Phone Field validates phone numbers as the customer types, before they attempt to submit the checkout form. This article explains how that validation works and what it means for your store.

What Real-time Validation Means#

As a customer types their phone number into the field, Smart Phone Field checks whether the number matches the expected format for the country they have selected. This happens instantly with every keystroke — there is no button to press and no page reload.

If the number looks valid, a subtle success indicator appears next to the field. If the number is incomplete or does not match the expected format for that country, the field indicates this so the customer knows to correct it before placing their order.

How It Works#

Smart Phone Field uses the intl-tel-input library for format validation. This library maintains a database of phone number formats for every country — the expected length, which digit patterns are valid, and how the number should be structured.

When a customer selects a country, the validation rules for that country are loaded. As they type, each digit is checked against those rules in real time.

For example a US phone number is expected to be 10 digits in a specific area code and subscriber format. If a customer selects United States and types only 7 digits, the field will show an incomplete indicator. Once they reach a valid 10-digit number in the correct format, the success indicator appears.

Why This Improves Data Quality#

Without real-time validation, customers can type anything into the phone field — a partial number, random digits, or even non-numeric characters — and the checkout will accept it. The result is bad data in your orders.

Real-time validation guides the customer to enter a correctly formatted number while they are still on the field. It is much easier to fix a mistake at the point of entry than to clean it up later across hundreds of orders.

What Validation Checks#

Real-time validation checks:

• That the number has the correct number of digits for the selected country
• That the number matches a valid format pattern for that country
• That the number is not obviously invalid, such as all zeros or a repeated digit sequence

Validation does not check:

• Whether the number is currently active or in service
• Whether the number belongs to the customer
• Whether the number is reachable via SMS or voice call

Format validation confirms the number looks correct. Verifying that a number is real and active requires a separate phone number lookup service which is outside the scope of this plugin.

The Customer Experience#

Customers see a clear visual indicator on the field as they type. The field does not shout errors at the customer before they have finished typing — it waits until they have entered enough digits to make a meaningful check.

If validation fails when the customer tries to submit the form, a clear error message appears explaining that the phone number format is incorrect for the selected country. The customer is not charged and the order is not placed until they correct the number.

Validation and Optional Fields#

If the phone field is set to optional in WooCommerce and the customer leaves it blank, no validation runs. Validation only applies when the customer has entered at least one digit into the field.

If a customer starts typing a number but leaves it incomplete and the field is optional, the field will indicate the number is incomplete. The customer can either complete the number or clear the field entirely to skip it.

Relationship to Server-side Validation#

Real-time validation is the first layer of data quality checking. It happens in the browser and gives the customer immediate feedback.

Server-side validation is the second layer and runs when the form is submitted. It catches cases where client-side validation was bypassed or where the submission came from outside the browser.

Both layers work together to ensure that only properly formatted phone numbers reach your orders. See the Server-side Validation article for more detail on how that second layer works.