Show popup message without resetting the form

Question

Currently I created registration form. The problem was if I enter the form wrongly, it shows an error message at the top of the form and the form

You can view my full code here

    <?php 
    include 'core/init.php';

    logged_in_redirect();
    include 'includes/overall/header.php' ; 

    //if form is being submitted
    if(empty($_POST)=== false)
    {
        //to validate whether user enters smtg or not otherwise no point continue to do the next validation
        //create an array
        $required_fields = array ('username','password','password_again','first_name','email','passport','gender','contactno','address');
        foreach($_POST as $key=>$value)
        {

            //if the key (value) in array of $required_fields is true which is empty
            if(empty($value) && in_array ($key, $required_fields) === true )
            {
                $errors[] = 'Fields marked with an asterisk are compulsory!';
                //the validation can happen to more than 1 field
                break 1;
            }
        }

        if(empty($errors) === true)
        {
            if(user_exists($_POST['username']) === true)
            {
                $errors[] = 'Sorry, the username \'' .$_POST['username'] . '\' is already taken.';
            }
            //search for the string,  preg_match(search_pattern, your_string)
            // \s = white space character
            //if(preg_match("/\\s/", $_POST['username']) == true)
            if(preg_match("/\s/", $_POST['username']) == true)
            {
                $errors[] = 'Your username must not contain space.';
            }
            if(strlen($_POST['password']) < 6)
            {
                $errors[] = 'Your password must be at least 6 characters';
            }
            if($_POST['password'] !== $_POST['password_again'])
            {
                $errors[] = 'Your passwords do not match at all';
            }
            if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false)
            {
                $errors[] = 'A valid email address is required';
            }
            if(email_exists($_POST['email']) === true)
            {
                $errors[] = 'Sorry, the email \'' . $_POST['email'] . '\' is already in use.';
            }
            if(preg_match("/\s/", $_POST['passport']) == true)
            {
                $errors[] = 'Your passport must not contain space!!.';
            }
            else if(preg_match("/\s/", $_POST['gender']) == true)
            {
                $errors[] = 'Your gender must not contain space.';
            }
            else if (!preg_match('/^[0-9]\d{9}$/', $_POST['contactno'])) 
            {

                $errors[] = 'Enter your contact number correctly!!.';
            }       
        }
    }
    //what does this line does is that to check whether success is in the end of the URL
    if(isset($_GET['success']) && empty($_GET['success']))
    {
        echo 'You have been registered successfully! You may login now';
    }
    else
    {//if there are no errors
        if (empty($_POST) === false && empty($errors) === true)
        {
            //create an array of $register_data for sanitizing purpose ,prevent SQL injection attactk
            $register_data = array
            (
                'username' => $_POST['username'],
                'password' => $_POST['password'],
                'passport' => $_POST['passport'],
                'first_name' => $_POST['first_name'],
                'last_name' => $_POST['last_name'],
                'gender' => $_POST['gender'],   
                'email' => $_POST['email'],
                'contactno' => $_POST['contactno'],
                'address' => $_POST['address']
            );
            register_user($register_data);
            //redirect and bring success variable to register.php
            header('Location: register.php?success');
            exit();
        }

        //
        else if (empty($errors) === false)
        {
            echo output_errors($errors);
        }

    ?>


    <form action="" method="post">
        <ul>
            <li>
                Username*:<br>
                <input type="text" name="username">
            </li>
            <li>
                Password*:<br>
                <input type="password" name="password">
            </li>
            <li>
                Password again*:<br>
                <input type="password" name="password_again">
            </li>
            <li>
              <table width="200" border="0">
                <tr>
                  <td width="157" scope="col">First name*: <br>
                    <input type="text" name="first_name">              </td>
                  <td width="439" scope="col">Last name: <br>
                    <input type="text" name="last_name">              </td>
                </tr>
                <tr>
                  <td><p>Gender*:
                      <select name="gender" id="gender">
                      <option value="">Select</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                      </select>
                  </p></td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>Passport: <br>
                  <input type="text" name="passport"></td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td><p>Email*:<br>
                    <input type="text" name="email">
                  </p></td>
                  <td><p>Contact No*:<br>
                      <input type="text" name="contactno" id="contactno">
                  </p></td>
                </tr>
                <tr>
                  <td colspan="2"><p>Address*<br>
                      <input name="address" type="text" size="100">
                  </p></td>
                </tr>
              </table>
            </li>
            <li>
                <input type="submit" value="Register">
            </li>
        </ul>
    </form>

    <?php 
    }
    include 'includes/overall/footer.php' ; ?>

Now I want to change to show pop up message without reset the form.

Is there any solution to do so?

Answer 1

It will be good if you give form input tags like this : <input type="text" name="username" placeholder="Username" value="<?php echo $_POST['username']; ?>"> and similarly for other fields except password.

OR

<input type="text" name="username" placeholder="Username" value="<?php echo (isset($_POST['username'])?$_POST['username']:''); ?>">

it will keep your form data if there is some kind of error and you have not validated the form.

Answer 2

PHP is a Server Side processing language. There is no way to process the PHP Code on the client without submitting the form.

However, you can accomplish what you want to using Javascript, which will run client side, and can pop up an alert (or a pop up) to indicate what is wrong with the form before the user submits the form.

There are some great library suggestions, and some great samples of that in this question here: Javascript form validation