htmlInputValidator

Some html, css and js code bodged together to validate the input fields in a form
<!DOCTYPE html>
<html>
    <head>
        <title>Input Validator</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet"> 
        <style>
            html, body {
                padding: 0;
                margin: 0;
                background-color: beige;
            }
            body {
                font-family: 'Inter', sans-serif;
                font-size: 120%;
            }
            br {
                margin: 10px 0;
            }
            form {
                width: 50vw;
                margin-left: 25vw;
                margin-top: 10vh;
                height: 100%;
            }
            label {
                font-weight: 500;
            }
            input {
                width: 100%;
                padding: 5px;
                font-size: 100%;
                font-family: 'Inter', sans-serif;
            }
            #buttonContainer {
                margin-top: 20px;
                width: 100%;
                text-align: center;
            }
            input[type="submit"] {
                text-align: center;
                width: auto;
            }
            h2 {
                font-size: 200%;
                font-weight: 800;
            }
            .erroneous-input {
                border-color: red;
                outline-color: red;
            }
            .erroneous-input::placeholder {
                color: red;
            }
        </style>

        <script>
            function ResetFieldAttrs(field) {
                field.classList.remove("erroneous-input");
            }

            function ValidatePassword(password) {
                var flags;
                let spec_chars = '!@#$%^&*()_+?';

                if (password.length < 8) return false;
                
                for (var i = 0; i < password.length; i++) {
                    let ccode = password.charCodeAt(i);
                    if (ccode >= 65 && ccode <= 90) flags |= 1;
                    else if (ccode >= 97 && ccode <= 122) flags |= 2;
                    else if (ccode >= 48 && ccode <= 57) flags |= 4;
                    else if (spec_chars.indexOf(password[i]) >= 0) flags |= 8;
                }

                return flags == 15;
            }

            function ValidateName(name) {
                let transformedName = name.toLowerCase();
                for (var i = 0; i < name.length; i++) {
                    if ((transformedName.charCodeAt(i) > 122 || transformedName.charCodeAt(i) < 97) && transformedName.charCodeAt(i) != 32) return false;
                }
                return name.length > 0;
            }

            function ValidatePhone(phone) {
                if (phone.length == 13) {
                    if (phone[0] != '+') return false;
                    for (var i = 1; i <= 12; i++) {
                        if (phone.charCodeAt(i) < 48 || phone.charCodeAt(i) > 57) return false;
                    }
                    return true;
                } else if (phone.length == 10) {
                    for (var i = 0; i < 10; i++) {
                        if (phone.charCodeAt(i) < 48 || phone.charCodeAt(i) > 57) return false;
                    }
                    return true;
                }
                else return false;
            }

            function ValidateEmail(email) {
                return (email.indexOf('@') > 0 && email.indexOf('@') < email.length - 1);
            }

            function ValidateForm() {
                var form = document.forms["inputForm"];
                var name_input = form.name;
                var email_input = form.email;
                var phone_input = form.phone;
                var password_input = form.password;
                var flag = true;
                if (!ValidateName(name_input.value)) {
                    name_input.value = "";
                    name_input.placeholder = "Name is not valid!";
                    name_input.classList.add("erroneous-input");
                    flag = false;
                }
                if (!ValidateEmail(email_input.value)) {
                    email_input.value = "";
                    email_input.placeholder = "Email address is not valid!";
                    email_input.classList.add("erroneous-input");
                    flag = false;
                }
                if (!ValidatePhone(phone_input.value)) {
                    phone_input.value = "";
                    phone_input.placeholder = "Phone number is not valid!";
                    phone_input.classList.add("erroneous-input");
                    flag = false;
                }
                if (!ValidatePassword(password_input.value)) {
                    password_input.value = "";
                    password_input.placeholder = "Password is not strong enough!";
                    password_input.classList.add("erroneous-input");
                    flag = false;
                }
                return flag;
            }
        </script>
    </head>

    <body>
        <form name="inputForm" onsubmit="return ValidateForm()">
            <h2>Personal details</h2>
            <label for="name-input">Name:</label><br>
            <input type="text" name="name" id="name-input" oninput="ResetFieldAttrs(this)"><br>
            <label for="email-input">Email address:</label><br>
            <input type="text" name="email" id="email-input" oninput="ResetFieldAttrs(this)"><br>
            <label for="phone-input">Phone number:</label><br>
            <input type="text" name="phone" id="phone-input" oninput="ResetFieldAttrs(this)"><br>
            <label for="password-input">Password:</label><br>
            <input type="password" name="password" id="password-input" oninput="ResetFieldAttrs(this)"><br>
            <div id="buttonContainer">
                <input type="submit" value="Submit">
            </div>
        </form>
    </body>
</html>
Editor is loading...