problem using with valid/invalid pseudoclass - html

Question

I am trying to make a form using HTML and CSS only. The problem is i am using valid pseudo-class to just give animation, but when it is invalid it mixes up with the label. the code will be at https://codepen.io/hardik-g1/pen/mdVzMyL and if you don't get please try this type number in name field you will see the problem.
code:
<div id="fle">
<div class="container">
<h2 id="aa">HACKATHON REGISTRATION</h2>
<form action="">
<div class="group">
<input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
<label class="set">First Name</label>
</div>
<div class="group">
<input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
<label class="set">Last Name</label></p>
</div>
<div class="group">
<input type="email" value="" required>
<label class="set">Email</label>
</div>
<div class="group">
<input type="number" value="" required pattern="[0-9].{10}" title="Enter correct mobile number">
<label class="set">Mobile number</label>
</div>
<div class="group">
<p>Branch</p>
<select name="branch" id="" required><option value=" ">Please select your branch</option><option value="cs">Computer Science</option>
<option value="it">Information Technology</option>
</select>
</div>
<div class="group"><p>Do you have participated before?</p>
Yes<input id="a" type="radio" name="hosting" value="yes">
No<input type="radio" id="a" name="hosting" value="no">
</div>
<div class="group" id="c">
<p>Project Description</p>
<textarea name="comment" placeholder="Write Here" rows="4" cols="40" required></textarea>
</div>
<input id="b" type="checkbox" id="Agree" name="agree" value="yes" required> Click here to agree to all the information above is true.
<p><button class="button" type="submit"><span>Register</span></button></p>
</form>
</div>
<div>
<video id="video" width="860" onclick="play();">
<source type="video/webm" src="https://res.cloudinary.com/iatneh/video/upload/v1594920650/Virtual_Hackathon_copy_-_Biteable_kmyhcp.mp4"/>
</video>
<h1>Click on it to play</h1>
<p>All validations show when submitted</p>
</div>
</div>
CSS
#fle{
display:flex;
}
body{
color:#999;
}
#aa{
color:black;
}
#b{
width: 12.5px;
margin:0;
}
#c{
margin:10px 0;
}
#a{
width:30px;
color:#999;
}
select{
width: 300px;
height: 30px;
}
.container {
font-family:'Roboto';
width:600px;
background:#FFF;
padding:10px 50px 50px;
}
.group {
position:relative;
margin-bottom:30px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus{ outline:none; }
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
input:invalid ~ label{
opacity:0.4;
}
.button {
border-radius: 4px;
background-color: #f4511e;
border:None;
color: #FFFFFF;
text-align: center;
font-size: 14px;
padding: 10px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}

Answer 1

You can listen to input changes and if it has a value inside add a class to keep the label floating.
Here is a sample you can modify and use it in your code (it will keep the .floating class on label as long has the input has content in it):
function checkForInput(element) {
const $label = $(element).siblings('label');
if ($(element).val().length > 0) {
$label.addClass('floating');
} else {
$label.removeClass('floating');
}
}
$('input.input').on('change keyup', function() {
checkForInput(this);
});
label.floating {
color:#5264AE;
/* use styles for floating your labels here */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<input type="text" name="some-name" class="input" />
<label class="input-label" for="textdemo">label</label>
</div>