masked input validation

Hi, i has a masked input like below.

$form->field($model, 'noic')->widget(MaskedInput::classname(), [

        'id' => 'noic',

        'name' => 'noic',

        'mask' => '999999-99-9999',

        'options' => [

            'class' => 'form-control',

            'readonly' => $readonly,

        ],

    ])

this is the rule for attribute noic

[['noic'], 'string', 'max' => 12, 'min' => 12],

On form submit, i remove the ‘-’ symbol from the value because i want only numbers.

My problem is client validation include the ‘-’ symbol for counting length for the value. So it wont pass validation. I dont want to change rules to

[['noic'], 'string', 'max' => 12, 'min' => 12]

because the validation message then will prompt that the value should has 14 character because user alredy familiar with this field to has fix 12 character. The ‘-’ symbol is use only for separator, not part of the value.

So how to make client validation doesnt count the ‘-’ symbol?

Enclose optional input in "[]".

I do this

'mask' => '999999[-]99[-]9999',

the client validation still fail for having input more than 12 character.

I want the client validation to validate the input max length as 12 character by counting only number and ignore the ‘-’ character.

Currently i disable client validation and when form submited, in the controller, i remove the ‘-’ character manually so server side validation will success.

I’m asking for solution so i can enable client validation again.

Hi,

Have you already considered to write your own small client validator for this purpose?

Read from here:

http://www.yiiframework.com/doc-2.0/guide-input-validation.html#client-side-validation

Best Regards

You can use scenarios. So have a rules to the view an other rules to save.

Save data is not a problem. I know how to manipulate data on server side to allow that. My problem is to has proper client side validation with masked input like that. Also, i has no experties about scenarios, maybe i will check it later to properly understand your suggestion.

After reading the guide, i think this is what i want http://www.yiiframework.com/doc-2.0/guide-tutorial-core-validators.html#filter

So i create this rule

[

              'noic',

              'filter',

              'filter' => function($value){

                  $value = str_replace('_', '', $value);

                  $value = str_replace('-', '', $value);

                  return $value;

              },

              'enableClientValidation' => true,

            ],

This rule automatically filter the attribute value so i dont need to do that manually. But it is only implemented on server side. The class documentation http://www.yiiframework.com/doc-2.0/yii-validators-filtervalidator.html has enableClientValidation properties. I set that to true. But client validation still doesnt work, i guess it is not done automatically, and i need to implement filter validator clientValidateAttribute() function http://www.yiiframework.com/doc-2.0/yii-validators-filtervalidator.html#clientValidateAttribute()-detail

So it come back to creating my own client validator, but i never done this and doenst really understand the example in the guide http://www.yiiframework.com/doc-2.0/guide-input-validation.html#client-side-validation but i will try figure it out. If you can provide easier to understand example would be helpful for me.

Just to make sure, do i need to read and implement this as well?

Why don’t you set the max and min in rules to 14? (considering the ‘-’)

I’ve a similar field that has this format 99.999-999 and I use this rules:

[['cep'], 'string', 'max' => 10],

['cep', 'match', 'pattern' => '/^(\d{2}\.\d{3}-\d{3})$/'],

['cep', 'filter', 'filter' => function ($value) {

    if(!empty($value))

        return preg_replace("/[^0-9]/","",$value);

}],

Hi, thanks for replying. Yeah, sometime ago, i thought i just give up to make it count as 12 and just set as 14. But there is another problem with my masked input. The masked i use create this default input value --. So if the user doesnt complete fill in the input field, for example the user type 1234, the input will be 1234__-__-____, the client validation will see the input has 14 length because it count the _ character as well. So the input value is considered pass client validation.

So in the end, i need to remove the _ character. Now i use the filter validator to remove - and _ character on server, but it doenst automatically do the same for client validation.

I think let just forget my question about this masked input, i will just create new post asking more explaination how to implement custom client validation because i dont fully understand the guide http://www.yiiframework.com/doc-2.0/guide-input-validation.html#implementing-client-side-validation

Are you using a pattern validation as in my previous code? If I understood, you need to validate not only the length but if all characters are numbers too.

[...]

    // you need to adjust for your case...

    ['cep', 'match', 'pattern' => '/^(\d{2}\.\d{3}-\d{3})$/'],

[...]

In this way the client script will be auto generated and partial input will not pass the validation.

Yeah, it work. Previously i only pay attention to the filter validator and miss the match validator. Thanks for take time to help me solve this.

I’m glad you solved.

You can use the So there are rules to the view that other rules to save.

I have no idea of it