practice form in Java script | part#1 |CSS HTML JAVASCRIPT CODE is also attached

JUST PUT ANGLED BRACKET WITH EVERY TAG because it is not allow to use angled brackets in discription
html
head
title Form Validation /title
link href="css/style.css" rel="stylesheet"
link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
/head
body
div class="main"
div class="header"
h2 Register here yourself /h2
/div
div class="section"
form
div class="form-group"
span class="erricon" id="erricontick" i class="fa fa-check" /i /span
span class="erricon" id="erriconcross" i class="fa fa-close" /i /span
input type="text" onkeyup="funname(this);" class="txtname" placeholder="Name"
p class="errmsg" id="nameMsg" You can use just Alphabets minmumm limit is 3 /p
/div
div class="form-group"
span class="erricon" id="erricontick" i class="fa fa-check" /i /span
span class="erricon" id="erriconcross" i class="fa fa-close" /i /span
input type="text" onkeyup="funUsername(this);" class="txtuname" placeholder="User Name"
p class="errmsg" id="unameMsg" You can use just Alphabets minmumm limit is 3 /p
/div
div class="form-group"
input type="email" class="txtemail" placeholder="Email"
/div
div class="form-group"
input type="password" class="txtpass" placeholder="Password"
/div
div class="form-group"
input type="tel" class="txtphone" placeholder="Phone"
/div
div class="form-group"
input type="submit" value="Register" class="txtbtn"
/div
/form
/div
/div
script
function funname(txtbox){
var msg=document.getElementById('nameMsg');
var val=txtbox.value;
var regexp=/^ A-Z a-z {3,100}$/;
if(val.match(regexp)){
txtbox.classList.add('inputok');
txtbox.classList.remove('inputerror');
msg.classList.remove('errActive');
document.getElementById('erricontick').classList.add('errActive');
document.getElementById('erriconcross').classList.remove('errActive');
}
else{
txtbox.classList.add('inputerror');
txtbox.classList.remove('inputok');
msg.classList.add('errActive');
document.getElementById('erriconcross').classList.add('errActive');
document.getElementById('erricontick').classList.remove('errActive');
}

}
function funUsername(txtbox){
var msg=document.getElementById('nameMsg');
var val=txtbox.value;
var regexp=/^ A-Z 0-9 _ {3,100}$/;
if(val.match(regexp)){
txtbox.classList.add('inputok');
txtbox.classList.remove('inputerror');
msg.classList.remove('errActive');
document.getElementById('erricontick').classList.add('errActive');
document.getElementById('erriconcross').classList.remove('errActive');
}
else{
txtbox.classList.add('inputerror');
txtbox.classList.remove('inputok');
msg.classList.add('errActive');
document.getElementById('erriconcross').classList.add('errActive');
document.getElementById('erricontick').classList.remove('errActive');
}

}
/script
/body
/html
HERE START CSS CODE
*{
margin:0px;
padding:0px;
}
.main{
width:500px;
height:auto;
background-color:skyblue;
margin:20px auto;
border-radius:30px;
box-sizing:border-box;
font-family:montserrat;
}
h2{
color:pink;

}
.header{
width:100%;
height:70px;
background-color:black;
color:#fff;
font-size:20px;
font-family:montserrat;
text-align:center;
padding-top:20px;
box-sizing:border-box;
}
.section{
width:100%;
height:auto;
background-color:cyan;

}
form{
width:100%;
height:100%;
padding:0px 20px;
box-sizing:border-box;
}
.form-group{
width:100%;
padding:20px;
box-sizing:border-box;
position:relative;
}
.form-group input{
width:100%;
height:35px;
padding:20px;
border-radius:5px;
border:0px;
box-sizing:border-box;
outline:0px;
}
.errmsg{
color:red;
margin-top:3px;
display:none;
}
.errActive{
display:block !important;
}
.inputerror{
border:3px solid red !important;
}
.inputok{
border:3px solid green !important;
}
.fa-check{
color:green;
}
.erricon{
width:20px;
height:20px;
display:block;
display:none;
text-align:center;
position:absolute;
right:30px;
top:27px;

}
.erricon#erriconcross{
color:red;
}