При вводе неверного имени пользователя или пароля для входа в систему цвет имени пользователя и пароля меняется на красный в php

Question

Я пытаюсь написать форму входа в систему, и она работает нормально, и когда я ввожу неверное имя пользователя или пароль для входа в форму, отображается сообщение об ошибке.Но я хочу, чтобы при появлении сообщения об ошибке цвет имени пользователя и пароля менялся на красный.Я не мог этого сделать.

Мой HTML-код выглядит так:

<div class="modal-dialog modal-sm">
        <div class="modal-content" style="margin-top: 50px;background-image: url(blue.png); background-size: cover;">
            <div class="modal-header">
                <h4 style="text-align: center;" class="list-group-item-heading"><b>LOGIN</b></h4>
            </div>
            <div class="modal-body">
                <form action="login.php" method = "post">
                    <div class="form-group">
                        <label for="username">Username:</label>
                        <input type="text" class="form-control" id="username" placeholder="Username" name="username" required="required" oninvalid="invalidUsername(this)" oninput="invalidUsername(this)" value= "<?php echo $username; ?>" >
                    </div>
                    <div class="form-group">
                        <label for="password">Password:</label>
                        <input type="password" class="form-control" id="password" placeholder="Password" name="password" required="required" oninvalid="invalidPassword(this)" oninput="invalidPassword(this)" value= "<?php echo $password; ?>" >
                    </div>              
                    <p id="error" style="color:red;"><?php echo $message_error; ?> </p>
                    <button type="submit" class="btn btn-primary"name="submit">Login</button>
                </form>
            </div>
        </div>
    </div> 

PHP-код выглядит так:

$message_error = '';
$username='';
$password='';
if (func::checkLoginState($dbh))
{
    header("location: index.php");  
}
if (isset($_POST['submit'])) 
{
    $query = "SELECT * FROM users WHERE user_username = :username AND user_password = :password";

    $username = $_POST['username'];
    $password = $_POST['password'];

    $stmt = $dbh->prepare($query);
    $stmt->execute(array(':username' => $username, ':password'=>$password));

    $row = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($row['user_id'] > 0) 
    {
        func::createRecord($dbh, $row['user_username'], $row['user_id']);
        header('location:profile.php?id='. $row["user_id"]);
    } else { 
        $message_error = "The username or password is wrong!";
    }
}

И JS-код выглядит так:

function invalidUsername(textbox)
{
    if (textbox.value =='') {
        textbox.setCustomValidity('İstifadəçi adını daxil edin');
        textbox.style.borderColor = "red";
        textbox.style.borderWidth = "1px"
        textbox.style.borderStyle = "solid";
        textbox.style.outline = "none";
        document.getElementById('error').innerHTML = '';
    }else{
        textbox.setCustomValidity('');
        textbox.style.border="none";
        document.getElementById('error').innerHTML = '';
    }
}

function invalidPassword(textbox)
{
    if (textbox.value =='') {
        textbox.setCustomValidity('Şifrəni daxil edin');
        textbox.style.borderColor = "red";
        textbox.style.borderWidth = "1px"
        textbox.style.borderStyle = "solid";
        textbox.style.outline = "none"; document.getElementById('error').innerHTML = '';
    }else{
        textbox.setCustomValidity('');
        textbox.style.border="none"; document.getElementById('error').innerHTML = '';
    }
}

Эти коды работают правильно.

Я пытался следовать js-коду, но при запуске программы цвет границ становился красным.Но я хочу, чтобы при появлении сообщения об ошибке цвет границ менялся на красный:

var error, username, password;
error=document.getElementById('error');
username=document.getElementById('username');
password=document.getElementById('password');

if (document.getElementById('error').innerHTML != '') 
{
    username.style.borderColor = "red";
    username.style.borderWidth = "1px"
    username.style.borderStyle = "solid";
    username.style.outline = "none";
    password.style.borderColor = "red";
    password.style.borderWidth = "1px"
    password.style.borderStyle = "solid";
    password.style.outline = "none";        
}