Difference between validation and mask

Asked

Viewed 347 times

11

I am making form validations. As for validation, everything goes well, but how to format the fields according to the data entered?

Example: in a date field, bars are added automatically, in a phone field, parentheses and strokes are added automatically. These additions are called "masks"?

  • 4

    Validation checks whether input is correct or in accordance with the specified pattern. Mask defines a formatting for input or displayed data.

3 answers

7

If your function alters controls the shape of a die, models its shape or imposes a certain shape to your die, this is considered a mask.

Ex: CPF - (000,000,000-00) / Date - dd/mm/yyyy

If your function checks whether your data is in accordance with an expected result, this is considered a validation.

function verificaNum(valor) {
     if(isNaN(valor)) { // se não for um número
         console.log('não é um número! Valor inválido');
     } 
     else { // se for um número
         console.log('é um número! Valor válido);
     }
}

Note: isNaN returns a Boolean if the value is or is not a number.

Ex:

 isNaN(123) //false
 isNaN('Hello') //true

But there may also be the case that you want to unify the two within the same function. Ai will depend on your purpose....

6


Mask

Mask is still a limited form of validation. Its use requires the input data to be in a certain format.

Through a pattern you force each position typed to have a certain character, for example that it is always a numeric digit, or a dot, a bar, which is an uppercase letter, which is a numeric range (typical case when masking a date and can not accept day 32, month 13, or even day 30 in month 02, etc.).

Some masks can be quite sophisticated and variable as data is entered.

Depending on how to use some data such as dots, commas and bars can be considered part of the typed data or just a form of presentation. It can even search for auxiliary information that helps in mandatory formatting. But it can’t go beyond the data format.

Masks can be used only for presentation (data output, formatting). In this case it is clear that it will not validate anything.

Often the mask is aided by a placeholder, but he alone is not the mask since it does not prevent something wrong in that position from being typed wrong.

Although I avoid many people use a library to help assemble masks, like jQuery and other more modern.

Validation

To validation "pure" can always check other things, in general more complex rules, and it usually indicates whether the data is valid or not in a boolean form.

She can check the input format as well, but this usually decreases the user experience, unless she goes through each character typed. But it is not always possible, validation often needs to look at the whole and not just that character.

In some cases what is a task of one or the other can be confused, or even conflict if it is not well done.

4

Masks more than formatting a data entry element also validate input type. It may be interesting that a numeric field does not accept characters, for example.

Validation refers to whether the data type corresponds to the expected, beyond the type but also in semantics. In a numerical field, the value shall not exceed x, for example.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.