<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function validate()
{
let namefi = document.getElementById("name").value;
let phonefi = document.getElementById("number").value;
let passfi = document.getElementById("password").value;
let cpfi = document.getElementById("cp").value;
let ucheck = /^([a-zA-Z0-9]{3,20}) ([a-zA-Z0-9]{3,30})$/
let phcheck = /^[678][\d]{9}$/
let pcheck = /^[a-zA-Z0-9\@.$&]{8,16}$/
if(ucheck.test(namefi))
{
document.getElementById("namela").innerHTML="";
}
else
{
document.getElementById("namela").style.visibility = "visible";
return false;
}
if(phcheck.test(phonefi))
{
document.getElementById("numberla").innerHTML = "" ;
}
else
{
document.getElementById("numberla").style.visibility = "visible";
return false;
}
if(pcheck.test(passfi))
{
document.getElementById("passfi").innerHTML = "";
}
else
{
document.getElementById("passla").style.visibility = "visible";
return false;
}
if(cpfi.match(passfi))
{
document.getElementById("cpla").innerHTML = "";
}
else
{
document.getElementById("cpla").style.visibility = "visible";
return false;
}
}
</script>
<form action = "formval3.html" onsubmit = "return validate()" >
<input id = "name" placeholder = "Enter Username" >
<label id =namela style = " color: brown; visibility: hidden;" > Try a different username </label> <br><br>
<input id = "number" placeholder = "Enter #" >
<label id =numberla style = "color: brown; visibility: hidden;" > Try a different number</label> <br><br>
<input id = "password" placeholder = "Enter password" type = "password" >
<label id =passla style = " color: brown; visibility: hidden;" > Try a different password</label> <br><br>
<input id = "cp" placeholder = "Confirm" type = "password">
<label id =cpla style = " color: brown; visibility: hidden;" > Doesnt match </label> <br><br>
<input type = "submit" >
</form>
Unless your trying to set length and chars then theres is not need for regex, just use strict comparison when checking the password