HTML/CSS - Password Validation (using HTML only) Online Editor and JavaScript Compiler

html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    <pre>
Password must have,
1) 8 to 12 characters
2) at least one numeric digit
3) at least one alphabet
4) must not have space or slash (/ or \)
5) at least one Capital letter
6) starting character must not be a number
    </pre>
        <form id="form">
            <label>Password: </label>
            <input type="text" pattern="^[^\d](?=.*[a-zA-Z])(?=.*\d)(?!.* )(?!.*\/)(?!.*\\)(?=.*[A-Z]).{7,11}$" title="Password Not Match!" required /><br />
            <input type="submit" />
        </form>
        
        <script>
            document.getElementById("form").addEventListener("submit", function(e) {
                alert("Password match")
                e.preventDefault();
            
            }, false)
//   https://regexper.com/#%5E%5B%5E%5Cd%5D(%3F%3D.*%5Ba-zA-Z%5D)(%3F%3D.*%5Cd)(%3F!.*%20)(%3F!.*%5C%2F)(%3F!.*%5C%5C)(%3F%3D.*%5BA-Z%5D).%7B7%2C11%7D%24         
css
BROWSER
Console