Input doesn't work when "required" and "pattern" attribute is applied - html

Question

Can you help me with this, I don't know what wrong. Input "Fullname" has applied required is ok.
(1) When I apply "required", "pattern" on input "Mail", the label doesn't hold the position as it's focus.
(2)Apply "pattern", don't apply "required, the label doesn't hold the position as begin. I attach an image, you can see more clearly explanation img
https://codepen.io/quang-dang/pen/BOgBNM
<form class="wrapper">
<div class="field">
<input type="text" id="fullName" name="fullName" required>
<label for="fullName">Full Name(*)</label>
<span class="bar"></span>
</div>
<div class="field">
<input type="mail" id="mail" name="mail" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required>
<label for="mail">Email(*)</label>
<span class="bar"></span>
</div>
<div class="field">
<input type="text" id="phoneNumber" name="phoneNumber" pattern="[0-9]+">
<label for="phoneNumber">Phone number</label>
<span class="bar"></span>
</div>
<div class="field">
<input type="text" id="message" name="message">
<label for="message">Message</label>
<span class="bar"></span>
</div>
<button typy="sumbit">Submit</button>
</form>
/*
* LAYOUT
*/
body {
width: 100%;
height: 100%;
margin: 0;
}
.wrapper {
max-width: 800px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
}
/*
* FIELD > INPUT
*/
.field {
position: relative;
max-width: 300px;
margin-bottom: 30px;
}
.field input,
.filed input:empty {
width: 100%;
border: none;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
outline: none;
padding: 6px 0;
transition: all 0.2s ease;
}
.field input:focus {
border-color: transparent;
}
.field label,
.field input:empty ~ label {
position: absolute;
top: 50%;
left: 5px;
font-size: 16px;
color: #999;
transform: translateY(-50%);
transition: all 0.2s ease;
}
.field input:focus ~ label,
.field input:valid ~ label {
top: 0px;
left: 0;
font-size: 12px;
color: #333;
}
/*
* FIELD > BAR
*/
.field .bar {
display: flex;
/*Start animation at center*/
justify-content: center;
}
.bar:before,
.bar:after {
content: "";
height: 2px;
width: 0;
background: #3498db;
transition: all 0.2s ease;
}
.field .bar:before {
left: 50%;
}
.filed .bar:after {
right: 50%;
}
.field input:focus ~ .bar:before,
.field input:focus ~ .bar:after {
width: 50%;
}

Answer 1

<form class="wrapper">
<div class="field">
<input type="text" id="fullName" name="fullName" required>
<label for="fullName">Full Name(*)</label>
<span class="bar"></span>
</div>
<div class="field">
<input type="text" id="Email" name="Email" required>
<label for="Email">Email(*)</label>
<span class="bar"></span>
</div>
<div class="field">
<input type="text" id="phoneNumber" name="phoneNumber" pattern="[0-9]+">
<label for="phoneNumber">Phone number</label>
<span class="bar"></span>
</div>
<div class="field">
<input type="text" id="message" name="message">
<label for="message">Message</label>
<span class="bar"></span>
</div>
<button typy="sumbit">Submit</button>
</form>