Modal validation using Bootstrap Modal – PHP

PHP Script & Validation:

    function SampleInput($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
    
    if (isset($_POST['RegisterClient'])) {

        $file = $_FILES['avatar']['name'];
        $file_location = $_FILES['avatar']['tmp_name'];
        $folder = "../Public/img/uploads/profile-picture/";
        $new_file_name = strtolower($file);
        $final_file = str_replace(' ', '-', $new_file_name);

        $name       = htmlspecialchars(trim($_POST['name'], ENT_QUOTES));
        $username   = htmlspecialchars(trim($_POST['username'], ENT_QUOTES));
        $email      = htmlspecialchars(trim($_POST['email'], ENT_QUOTES));
        $password   = htmlspecialchars(trim($_POST['password'], ENT_QUOTES));
        $cpassword  = htmlspecialchars(trim($_POST['cpassword'], ENT_QUOTES));
        $role       = htmlspecialchars(trim($_POST['role'], ENT_QUOTES));

        if (move_uploaded_file($file_location, $folder.$final_file)) {
            $image = $final_file;
        }

        if(empty($_POST['name']) || empty($_POST['username']) || empty($_POST['password']) || empty($_POST['cpassword']) || empty($_POST['role'])) {
            $error = "All fields are required!"; 
        } else {
            $name = SampleInput($_POST['name']);
            $username = SampleInput($_POST['username']);
            $password = SampleInput($_POST['password']);
            $cpassword =SampleInput($_POST['cpassword']);
            $role = SampleInput($_POST['role']);
            if (!preg_match('/^[a-zA-Z0-9s]+$/',$name && $username && $password && $cpassword && $role)) {
                $error = "Only letters and white space allowed";
            }
        }

        $stmt = $db->prepare("INSERT INTO clients(name, username, email, password, avatar, role, registration_date) VALUES (:name, :username, :email, :password, :avatar, :role, NOW())");
        $stmt->execute(array(
            'name' => $name,
            'username' => $username,
            'email' => $email,
            'password' => $password,
            'avatar' => $image,
            'role' => $role
        ));

        $success = 'Registered!';
    }

Modal:

<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form action="" method="POST" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Create user</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                            <?php
                                if ($error) {
                                    echo '<div class="mb-3">' . $error . '</div>';
                                } else if ($success) {
                                    echo '<div class="mb-3">' . $success . '</div>';
                                }
                            ?>
                            <div class="row gx-3 mb-3">
                                <div class="col-md-12">
                                    <label class="small mb-1" for="login-fullname">Full name*</label>
                                    <input class="form-control" name="name" type="text" placeholder="Valid full name" />
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="login-username">Username (how your name will appear to other users on the site)</label>
                                <input class="form-control" name="username" type="text" placeholder="Valid username" />
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="login-email">Email address</label>
                                <input class="form-control" name="email" type="text" placeholder="Valid email" />
                            </div>
                            <div class="row gx-3 mb-3">
                                <div class="col-md-6">
                                    <label class="small mb-1" for="login-password">Password</label>
                                    <input class="form-control" name="password" type="password" placeholder="Strong password" />
                                </div>
                                <div class="col-md-6">
                                    <label class="small mb-1" for="login-cpassword">Confirm Password</label>
                                    <input class="form-control" name="cpassword" type="password" placeholder="Strong password" />
                                </div>
                            </div>
                            <div class="row gx-3 mb-3">
                                <div class="card-body text-center">
                                    <input type="file" required class="btn btn-primary" name="avatar">
                                    <div class="small font-italic text-muted mb-6">JPG or PNG no larger than 5 MB</div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="small mb-1" for="selectRole">Select user role</label>
                                <select class="form-control" name="role">
                                    <option value="">Select user role</option>
                                    <option value="admin">Admin</option>
                                    <option value="user">User</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                            <button type="submit" name="RegisterClient" class="btn btn-primary">Create</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

I don’t know where the problem is, I want the modal to remain open even if the problem or form has been submitted successfully. Now, with this code, if there is a problem with the submit form, the modal shuts down and if we open it again, the user can see error messages. Where am I wrong?

Answer

After a whole day, I resolve an issue with this.

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

With this code written above, a modal will be closed only if the user clicks on the close button. With this code, you disabled the close modal by pressing the ESC button on the keyboard.