title: Output PHP Form Validation Error Messages When Using JavaScript Fetch API
body: <p>I have a page with multiple forms on, where each form is processed with PHP in the backend that sends data to a MySQL database, but on the front end it uses Javascript's fetchAPI to prevent the page refreshing when an instance of the form is completed and data is sent to the database.</p>
  <p>I have some PHP server side validations that take place that still work in terms of not sending the data to the database, although on submission the instance of the form completed does disappear from the page (due to javascript shown below), but re-appears when refreshed if it failed the validations.</p>
  <p>The main code example below includes this code block that would normally output the error message:</p>
  <pre><code>&lt;?php 
      // echo form validation error messages
      if(isset($error)) {
          foreach($error as $msg) {
              echo &quot;&lt;p&gt;** {$msg}&lt;/p&gt;&quot;;
          }
      }
  ?&gt;
  </code></pre>
  <p>In terms of outputting these error messages is it possible to still use this PHP code (currently not working), or now I'm using the javascript fetchAPI in conjunction with PHP, will I have to also write validations in JavaScript to output the errors on the front end, in addition to the PHP ones which securely prevent the form failing the validations? It should be noted there are multiple instances of the form on the page which are outputted with a while loop, each one is in relation to a specific post.</p>
  <pre><code>&lt;?php
  if(isset($_POST['upload-submit'])) {
      // note $imageTitle is a variable given to the title of a post submitted via an HTML form
  
      if(!preg_match('/^[a-zA-Z0-9\s]+$/', $imageTitle)) {
          $error[] = &quot;Post Title can be letters and numbers only&quot;;
      }
  
      if(empty(trim($imageTitle))){
          $error[] = &quot;Image Title cannot be blank&quot;;
      }
  
      // if no errors process submission
      if (!isset($error)) {
  
          try {
  
          // PDO prepared statements that update the database
      
          } catch (PDOException $e) {
              echo &quot;There is an error: &quot; . $e-&gt;getMessage();
          }
  
      }
  }
  ?&gt;
  </code></pre>
  <p>Also here is the javascript fetchAPI code that works on the page.</p>
  <pre><code>var forms = document.querySelectorAll('.image-upload-details-form'),
  
  forms.forEach(item =&gt; {
      
          item.querySelectorAll('[type=&quot;submit&quot;], button').forEach(button =&gt; {
              button.addEventListener(&quot;click&quot;, e =&gt; item._button = button); //store this button in the form element
          })
  
          item.addEventListener(&quot;submit&quot;, function(evt, btn) {
  
              evt.preventDefault();
  
              const formData = new FormData(this);
              if (this._button) //submitted by a button?
              {
              formData.set(this._button.name, this._button.value);
          }
  
          fetch(&quot;upload-details.php&quot;, {
              method: 'post',
              body: formData
          }).then(function(response){
              return response.text();
          }).then(function(text){
              console.log(text);
          }).catch(function (error){
              console.error(error);
          })
  
          // removes form when submitted
          item.remove();
  
      })
  
  })
  </code></pre>
  <p>Many thanks in advance for any help / advice.</p>