How to Add Custom Validation Rules in Elementor Forms (No Plugins Needed)?

Hello guys how are you? Welcome back to my blog therichpost.com. Guys today in this post, I will tell show you How to Add Custom Validation Rules in Elementor Forms (No Plugins Needed)?

Guys if you are new in  WordPress or in  WooCommerce then please check the below links for some good tutorials:

1. WooCommerce Hooks
2. WordPress Tricks
3. WordPress Hooks
4. Dokan

Guys below are two practical methods to achieve what you want:

✅ Method 1: Frontend Validation (Recommended for User Experience)

You can use JavaScript to restrict inputs or validate on form submit.

💡 Example: Allow only letters in the “Name” field and block email-like input in “ZIP Code” field

1. Assign custom classes or IDs to your form fields in Elementor
   Go to the form field > Advanced > CSS Classes:
   • Name field → name-only
   • ZIP Code field → zip-code-block
2. Add this JavaScript (in Elementor > Custom Code or Theme):

document.addEventListener('DOMContentLoaded', function () {
  // Only allow letters in Name field
  document.querySelectorAll('.name-only input').forEach((input) => {
    input.addEventListener('input', function () {
      this.value = this.value.replace(/[^a-zA-Z\s]/g, '');
    });
  });

  // Disallow email-like input in ZIP Code field
  document.querySelectorAll('.zip-code-block input').forEach((input) => {
    input.addEventListener('input', function () {
      if (this.value.includes('@') || this.value.includes('.')) {
        alert('ZIP Code must not contain @ or .');
        this.value = this.value.replace(/[@.]/g, '');
      }
    });
  });
});

✅ Method 2: Server-Side Validation with elementor_pro/forms/validation Hook

This method is more secure because it validates the input on form submission.

🧩 Add to your theme’s functions.php:

add_action('elementor_pro/forms/validation', function( $record, $ajax_handler ) {
  $fields = $record->get( 'fields' );

  // Validate Name field (only letters)
  if ( isset( $fields['name'] ) && !preg_match( '/^[a-zA-Z\s]+$/', $fields['name']['value'] ) ) {
    $ajax_handler->add_error( 'name', 'Only letters are allowed in the Name field.' );
  }

  // Validate ZIP code field (block email-like input)
  if ( isset( $fields['zip'] ) && preg_match( '/@|\./', $fields['zip']['value'] ) ) {
    $ajax_handler->add_error( 'zip', 'ZIP code must not contain @ or .' );
  }
}, 10, 2 );

👉 Make sure the form field Shortcodes (not labels) are name and zip.

✅ Best Practice

• Use frontend validation for user convenience.
• Use backend validation for security and reliability.

Okay guys this is it and if you will have any query then feel free to comment below.

Ajay

Thanks