VALIDATION OF PASSWORD

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
input:required:invalid, input:focus:invalid {
    border-color: red; 
    
}
input:required:valid {
    border-color:green;
}

</style>
</head>
<body>
    <h2>Validation of password using CSS</h2>
	<div>
    <form onsubmit="return checkForm3(this);" >
            <label for="field_username">Username</label>
            <input id="field_username" type="text" name="username"required>
            <label for="field_pwd1">Password</label>
            <input id="field_pwd1" type="password" onchange="form.pwd2.pattern = this.value;" name="pwd1" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,16}$" required>
            <input type="submit">
            
    </form>
</div>
</body>
</html>