Skip to content
Advertisement

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?

Advertisement

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.

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement