提交失败后如何保持表格输入

Question

I am fairly new to coding and I am building a contact form using PHP. I have included a reCaptcha that must be checked. If the user fills out the form, and presses the submit button without checking the reCaptcha. The form resets and the user would have to fill everything out once again.

How can I keep the input when the reCaptcha is not checked and the form is submitted?

I have found on here to use htmlspecialchars. It does work by replacing the html characters, but the user would still have to fill it out again if they used quotes or < >.

Any advice would be awesome on XSS or SQL injection safety measures or using AJAX possibly.

<label for="message"> Message:</label>
<textarea class="form-control" type="textarea" id="message" 
name="message" maxlength="6000" rows="5" value="<?php echo 
htmlspecialchars($message); ?>" required ></textarea>

Here is how I have my PHP

    ```            

   if(filter_has_var(INPUT_POST, 'submit')) 
    {



  $name = htmlspecialchars($_POST['name']);
  $email = htmlspecialchars($_POST['email']);
  $message = htmlspecialchars($_POST['message']);
  $phone = $_POST['phone'];



  $mail = new PHPMailer;

                                                            // Enable verbose debug output

 $mail->isSMTP();    // Set mailer to use SMTP
  $mail->SMTPDebug = 0; 
 $mail->Host = 'smtp.gmail.com';  // Specify main and backup SMTP servers
$mail->SMTPAuth = true;    // Enable SMTP authentication
 $mail->Username = EMAIL;                 // SMTP username
  $mail->Password = PASS;         // SMTP password
 $mail->SMTPSecure = 'tls';    // Enable TLS encryption, `ssl` also accepted
 $mail->Port = 587;    // TCP port to connect to

  $mail->setFrom($email, $name);
  $mail->addAddress('mail.com', 'Joe User');     // Add a recipient
 // Name is optional
   $mail->addReplyTo($email);   // Optional name
    $mail->isHTML(true);       // Set email format to HTML

   $mail->Subject = 'Client Contact Email';
    $mail->Body    = '<h2>Contact Request</h2>
                     <h4>Name</h4><p>'.$name.'</p>
                     <h4>Email</h4><p>'.$email.'</p>
                     <h4>Message</h4><p>'.$message.'</p>
                      <h4>Phone</h4><p>'.$phone.'</p>';

if ($decgoogresp->success == true)
 {
 // Success
   if(!$mail->send())
 {
       $msg = 'Message could not be sent.';
        $msgClass = 'Mailer Error: ' . $mail->ErrorInfo;
        } else {
             $msg = 'Your email has been sent';
              $msgClass = 'alert-success';
            }
            } else {
               $msg = "Please check the Captcha";
               $msgClass = 'alert-danger'; 
                   }
    }

Answer 1

First, you can do some basic form validity testing on the javascript side, during the form submit process. If, for example, a required field is blank, you can return false; - which will stop the submit process and return control to the user.

Specifically for Google Recaptcha, Google has added a callback option for when the form has been checked. See this answer for how to implement.

The more secure field validations, though, must be actioned on the PHP side (a savvy user, with DevTools, can fake the javascript validations and get the form to submit). If any fields fail validation on the PHP side, there is only one option: send the form data back to the page and reconstruct the user's input.

Here is an example of simple form validation on the javascript side, for your reference.

References:

Add a callback to Google recaptcha to check if user checked the box

MDN article on form validation - note the SmashingMagazine links at bottom

TutorialsPoint - more concise example of the same

Video tutorial of same (30 min)

Javascript - check if Google Recaptcha was clicked