How do I build a client side/server side validator properly?

Following the input validation document, I have created an inline validator that works as expected from the server side. I would like to have it function client side as well. This is not for an image file upload. It is to check that the string ends in an allowable file extension.

In the components section of my configuration file (web.php) I added

'message' => [

    'class' => 'app\components\ProductImageValidator',


I made a directory components in the app’s root and placed ProductImageValidator.php


	namespace app\components;

	use yii\validators\Validator;

	use app\models\BaseProducts;

	class ProductImageValidator extends Validator{




In my model’s (BaseProducts.php) rules I added


This triggers a ReflectionException Class ProductImageValidator does not exist error. What am I missing?

ProductImageValidator should be a function in your model.

About client side validation please check this$whenClient-detail

I can only get the validation to fire for a core validator, like required, when the form is submitted.

['product_image', 'required', 'when' => function ($model) {

     return $model->any_model_field == 'some_value';},

  'whenClient' => "function (attribute, value) {

     return $('#any_model_field').val() == 'some_value';


I need to trigger the function’s error message when the user tabs/clcick another field prior to submission.

['product_image', 'allowProductImage', 'when' => function ($model) {

     return $model->product_image != '';},

  'whenClient' => "function (attribute, value) {

     return $('#product_image').val() != '';


public function allowProductImage($attribute, $params){

	if (!preg_match('/\.(?:jpg|tif|eps)$/', $this->$attribute))

			$this->addError($attribute,'Image file must end with .eps, .tif or .jpg');