Good day!

Faced such an interesting problem.

There is a form on the site that is visible immediately and a form that is in the pop-up window.

A mask is connected to both input using the inputmask plugin

 $('input[type="tel"]').inputmask("+7(999)999-99-99");

Form in a popup window. input tel in normal condition. enter image description here

But the form that is visible immediately. Immediately highlighted in red. If filled, it will no longer be highlighted in red. enter image description here The code is the same. I use pug mixins so I know for sure that the structure is 1 to 1.

I made it so that the pop-up window was visible immediately, assumed that the test on forms that were NOT display: none somehow worked, but was not highlighted in the input tel pop-up window, everything was fine.

I added input tel to various parts of the document (wrapping it in a form and adding a button ) wherever such a test form is located, the input tel always highlighted in red.

Checked on explorer , edge , opera , google chrome , yandex browser - such a bug only on Mozilla.

How to fix it?

    1 answer 1

    Most likely, the fact is that your field is marked as mandatory, so it does not pass the html validation, because it is initially empty.

     input:invalid, input:required{ box-shadow:none; } 
     <input type="tel" required placeholder="телефон">

    • And why should it be validated from the very beginning? And why on some forms there is a check for validation, but not on others? - Igor
    • Just maybe there is a way to somehow make sure that there is no verification at the beginning, before the form is submitted? I'd love to find such a way - Igor
    • You can use the pseudo :placeholder-shown . For example: input:not(:placeholder-shown):invalid{border-color:red} makes the border color for non-valid and non-empty (in which placeholder is not shown) fields red. Cons - 1) weak browser support; 2) for fields where placeholder is not provided, you will have to specify it (at least a space). - zhurof