Why is the initial state of a required <input> invalid?

Question

When I place one or more restrictions on one <input>, initially its state appears as invalid. As in the example below:

input {
    border: 2px solid #ccc;
    padding: 8px;
}

input:invalid {
    border-color: red;
}

input:valid {
    border-color:green;
}

<input required type="text" pattern="\d*" placeholder="Somente Digitos" min="1"/>

Note that, as soon as loaded the code the border of the <input> appears in red as a required field (defined in the CSS to display it this way when the value in input is incorrect).

My question is: How do I make for the input neutral as soon as the page loads? That is, without displaying the green/red defined in the CSS. (or better: How do I make it not start in the state :invalid? ).

Answer 1

If you have a field at the same time required and an empty field, it is in fact an invalid field - after all, a required field, to be valid needs to have data :)

What you can do in this case, to improve the initial user experience, is to "delay" the CSS to appear only after there is interaction with the form.

In this intention, two intermediate solutions follow. One is based on the autofocus, and it’s pure CSS. The other has some similarity to the @Sergio response, but with a view to cases where there is the send button (or other equivalent procedure).

For one field only: CSS

If you have a unique field, can solve without JS:

• Set the field to autofocus;

• style with CSS so that while the field has focus, it is "neutral".

input             { border: 2px solid #ccc; padding: 8px; }
input:invalid     { border-color: red; }
input:valid,
input:focus:valid { border-color:green; }
input:focus       { border-color: #ccc; !important; }

<input required type="text" pattern="\d*" placeholder="Somente Digitos" min="1" autofocus />

For several fields: JS

The following JS function causes, in addition to the field to respond visually to the requirements in the loss of focus, in an eventual attempt to send the fields all receive the CSS indicating their status.

In this way, the feedback happens in the form even without a certain field being visited.

var hi = document.querySelectorAll('input.off');
for (var i = 0; i < hi.length; i++) hi[i].onblur = function(){ this.classList.add('hl'); }
function highlightAll() { for (var i = 0; i < hi.length; i++) hi[i].classList.add('hl'); }

input            { border: 2px solid #ccc; padding: 8px; }
input.hl:invalid { border-color: red; }
input.hl:valid   { border-color:green; }

<input class="off" type="text" required pattern="\d*" placeholder="Somente Digitos" min="1" /><br>
<input class="off" type="text" required placeholder="Qualquer coisa" /><br>
<input class="off" type="text" placeholder="Campo não obrigatório" /><br>
<button onClick="highlightAll()">enviar</button>

Answer 2

What generates this behavior is the property required. That is to have a input with required and without value defined (or inserted) causes the input worthless. That is to say the browser knows that this field is required and that it is empty, so its state is invalid` and the CSS reflects this.

Giving value="0" or taking out the required (as in the example below) works as expected.

input {
    border: 2px solid #ccc;
    padding: 8px;
}

input:invalid {
    border-color: red;
}

input:valid {
    border-color:green;
}

<input type="text" pattern="\d*" placeholder="Somente Digitos"  min="1"/>

To get around this problem you have to use Javascript. For example:

var required = document.querySelector('input[required]');
required.onblur = function(){ this.classList.add('visitado'); };

input {
    border: 2px solid #ccc;
    padding: 8px;
}

input.visitado:invalid {
    border-color: red;
}

input:valid {
    border-color:green;
}

<input required type="text" pattern="\d*" placeholder="Somente Digitos" min="1"/>