Form Submission Is Removing HTML Component Even When Form Validations Fail

I have a modal that pops up with a JavaScript click event which contains a simple form / input to send some text to a MySQL database via PHP. The PHP also handles a couple of simple form validations. When validation errors occur, the error message appears, but the pop up modal disappears. The JavaScript involved isn't causing this (I don't think) because the only JS that is involved with removing the modal is when you click the cancel button to hide it.

If I have the form on the page normally (i.e don't have it show onclick) the issues doesn't happen. The submission to the database all works fine, in terms of if it passes the validations it submits, and if it doesn't it fails. I guess the submit functionality is causing the issue? If when an error occurs, you make the modal visible, you can see the error message performing as it should do in the correct place.

My Question How do I have it so when the error message shows during the PHP form validation the pop up modal remains visible?

JavaScript

let 
createBoardButton = document.querySelectorAll('.create-board-button'),
cancelBoardButton = document.querySelectorAll('.cancel-new-board'),
createBoardForm = document.querySelector('.create-board-form')

// -- NOTE: the '.hidden' CSS class is just 'display:none'

if(createBoardButton) {
    createBoardButton.forEach(item =>  {
        item.addEventListener('click', () => {
            createBoardForm.classList.remove('hidden') // removes hidden class so modal shows
        })
    })

    cancelBoardButton.forEach(item =>  {
        item.addEventListener('click', () => {

            createBoardForm.classList.add('hidden')

            // remove any previous error message on closing the modal
            createBoardForm.querySelector('.alert-wrapper').innerHTML = ''

        })
    })
}

HTML

<!-- BUTTON THAT BRINGS UP MODAL ON CLICK-->

<button title="Create Board" class="create-board-button">+ Create New Board</button>

<!-- FORM THAT IS INITIALLY HIDDEN WITH THE 'hidden' CLASS of display:none -->

<form style="background: black" class="create-board-form hidden" method="post">
<div class="form-row">
    <h2">New Board</h2>
    <label for="board-name">BOARD NAME:</label>
    <input id="board-name" name="create-board-name" placeholder="Board Name" type="text">
    <div class="create-board-inner">
        <button type="submit" name="submit-board-name">Create The Board</button>
        <p class="cancel-new-board">Cancel</p>
    </div>
</div>
<?php 
    // echo error messages for the form validations
    if(isset($error)) {
        foreach($error as $msg) {
            echo "<div class='alert-wrapper'>
                    <p class='alert-message'>** {$msg}</p>
                </div>";
        }
    }
?>
</form>

PHP

<?php

if(isset($_POST['submit-board-name'])){

    $create_board_name = $_POST['create-board-name'];
    
    if(strlen(trim($create_board_name)) < 10) {
        $error[] = "Board name must be at least 10 characters long";
    }

    if(strlen(trim($create_board_name)) > 150) {
        $error[] = "Board name must be less than 150 characters long";
    }

    if (!isset($error)) {
    
        try {

            $createBoardSQL = "INSERT INTO boards (board_name, user_id) VALUES (:board_name, :user_id )";
        
            $stmt = $connection->prepare($createBoardSQL);
            $stmt->bindParam(':board_name', $create_board_name);
            $stmt->bindParam(':user_id', $db_id);
            $stmt->execute();

            header("Location: boards.php?username={$username}");

        } catch(PDOException $e) {
            echo "Error: " . $e->getMessage();
        }

    }
} else {
    // give values an empty string to avoid an error being thrown before form submission if empty
    $create_board_name = "";
}

?>