What Is the Enable Inline Checkout Field Validation feature?
By default, WooCommerce validates checkout fields only when the customer submits the form. The Enable Inline Checkout Field Validation feature adds real-time validation as the customer types in each field:
- Shows required field indicators (e.g., asterisk or “Required”)
- Validates email format as the customer types
- Validates phone format
- Validates date formats
- Validates postcode format (where applicable)
- Shows error messages inline (not just at form submit)
Why You Need It
Inline validation improves the checkout experience:
- Catch errors early: Customer discovers the problem before filling out the entire form
- Reduce form abandonment: Fewer customers abandon at the submit button due to “unexpected” errors
- Better mobile experience: On mobile, submitting a form and seeing an error at the top means scrolling back to find the field. Inline validation shows the error right where the customer is typing.
For most checkout forms, inline validation is a standard UX improvement.
How to Enable Inline Checkout Field Validation in WordPress
Step 1: Navigate to Settings
Click into the Classic Monks plugin settings in your WordPress dashboard.
Step 2: Go to the WooCommerce Tab
Click on the WooCommerce menu, then click the Checkout subtab.
Step 3: Enable Inline Checkout Field Validation
Toggle on Enable Inline Checkout Field Validation.
Step 4: Save Changes
Click Save Changes.
Step 5: Test
Visit the checkout page. Start filling in fields. Validation messages should appear inline (next to the field) as you type.
Configuration Options
| Option | Description | Default |
|---|---|---|
| Enable Inline Checkout Field Validation | Master toggle. | Off |
The validation rules are defined by WooCommerce’s standard field validation. To customize the validation messages, use the plugin settings (see Advanced Options).
What Gets Affected
- All standard WooCommerce checkout fields: real-time validation
- The customer’s interaction with the form: validation messages appear inline as they type
- The form submission: still validates (inline validation is additive, not a replacement)
- The validation timing: occurs on blur (when the customer leaves the field) and on input for specific fields (like email)
What Does NOT Get Affected
- The actual validation rules (set by WooCommerce’s standard fields)
- The field requirements (required vs optional)
- The form submission process (still validates on submit)
- Custom fields added by other plugins (those plugins handle their own validation)
- The order review section (validation is only on the checkout form)
Advanced Options (Developers)
This feature registers 1 WordPress hook in woocommerce-functions.php:
Actions:
wp_footercallscm_checkout_place_order_button_js()(Injects inline validation JS (priority 999))
// Hooked in woocommerce-functions.php
add_action( 'wp_footer', 'cm_checkout_place_order_button_js' );The feature modifies WooCommerce behavior by registering or removing hooks. Disabling it reverses those changes.
Troubleshooting
Validation is not firing
Cause: The toggle is off, or a theme/plugin conflict is preventing the validation JavaScript from loading.
Fix: Verify the toggle is on. Check the browser console for errors. Disable other checkout-related plugins to find the conflict.
Validation messages are showing but in the wrong location
Cause: A theme is positioning the checkout fields in a non-standard way.
Fix: Customize the validation message location with the plugin settings. Most themes position the message right after the field, but some require custom positioning.
The validation is too aggressive (showing errors before user finishes typing)
Cause: The validation event is set to “input” (fires on every keystroke) instead of “blur” (fires when the field loses focus).
Fix: Configure in the plugin settings to set the event to “blur” (default recommended).
Required field indicators (asterisks) are not showing
Cause: The toggle controls validation behavior, not the field labels. The required indicators are controlled by the theme or WooCommerce’s default field rendering.
Fix: Customize the field labels via the woocommerce_checkout_fields filter to add required indicators. Or use a theme that displays required indicators automatically.