I'm doing form validations. As for the validation, everything happens fine, 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 dashes are added automatically. Are these additions called "masks"?
Mask is still a limited form of validation. Its use requires that the input data be in a certain format.
By means of a pattern you require that each position you enter has a certain character, for example, that is always a numeric digit, that is always a period, a slash, that is a capital letter, that is a numerical range typical when you are 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 of variables as data is being entered.
Depending on how you use some data such as periods, commas, and slashes, they can be considered part of the typed data or just a form of presentation. It can even search for ancillary information to aid in mandatory formatting. But it can not go beyond the data format.
Masks can only be used for presentation (data output, formatting). In this case, of course, it will not validate anything.
Often the mask is aided by a placeholder , but it 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 mount masks, such as jQuery.
validation "pure" can always check other things, usually more complex rules, and it usually indicates whether the data is valid or not in a Boolean form.
It can check the input format as well, but this will often decrease the user experience, unless you make each character typed. But it's not always possible, validation often needs to look at the whole and not just that character.
In some cases what is the task of one or the other may be confused, or even conflict if it is not well done.
If your function changes controls the shape of a data, shapes its shape or imposes a certain format on your data, this is considered a mask.
Ex: CPF - (000.000.000-00) / Date - dd / mm / yyyy
If your function does a check if your data conforms to 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 whether or not the value is a number.
Ex:
isNaN(123) //false
isNaN('Hello') //true
But there may also be cases where you want to unify the two within the same function. It will depend on your purpose ....
The masks rather than formatting a data entry element also valid the 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, in addition to the type but also in the semantics. In a numeric field, the value can not be greater than x , for example.