Validations côté serveur sur page modal

Bonjour à tous,

Voila je rencontre un petit problème avec mon code.
J'ai une page modal contenant un formulaire de création présenté dans le code ci-dessous

<?php 
  require('../../../model/dbconfig.php');

  $typeLocalite = $db->query('SELECT type_localite_id, libelle FROM type_localite ORDER BY 2');

  $idTypeLocalite = '';
  $libelle = '';
  $abbrLocalite = '';
  $localiteParent = '';
  $error = false;
  $errorMsg = '';

  if(strtolower($_SERVER['REQUEST_METHOD']) == 'post') {

    if (!empty($_POST['idTypeLocalite']) AND !empty($_POST['libelle']) AND !empty($_POST['localiteParent'])) {

      $idTypeLocalite = $_POST['idTypeLocalite'];
      $libelle = $_POST['libelle'];
      $abbrLocalite = $_POST['abbrLocalite'];
      $localiteParent = $_POST['localiteParent'];
    }
    else {
      $error = true;
      $errorMsg = 'Veuillez renseigner tous le champs s\'il vous plait';
    }

  }
?>

<div class="modal-header">
  <h5 class="modal-title" id="exampleModalCenterTitle">Région</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="modal-body">
  <form method="post" action="index.php">
    <?php if($error): ?>
      <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <?= $errorMsg; ?>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <?php endif; ?>
    <div class="form-row">
      <div class="col">
        <select id="idTypeLocalite" name="idTypeLocalite" class="form-control" required="required">
          <option value="">Sélectionner le type de localité</option>
          <?php while($result = $typeLocalite->fetch()): ?>
            <option value="<?= $result['type_localite_id']; ?>">
              <?= $result['libelle'] ?>
            </option>
          <?php endwhile; ?>
        </select>
      </div>
      <div class="col">
        <input type="text" name="libelle" class="form-control" placeholder="Libellé" required="required">
      </div>
    </div>
    <div class="form-row" style="margin-top: 15px;">
      <div class="col">
        <input type="text" name="abbrLocalite" class="form-control" placeholder="Code/Abréviation" required="required">
      </div>
      <div class="col">
        <input type="text" name="localiteParent" class="form-control" placeholder="Localité parent" required="required">
      </div>
    </div>

    <center style="margin-top: 40px;">
      <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
      <button type="submit" class="btn btn-success" name="VALIDER">Valider</button>
    </center>
  </form>
</div>

En plus des validations côté client avec l'attribut "required", j'ai aussi fait des validations côté serveur en vérifiant si les champs sont vides.
Côté client, l'attribut "required" réagit comme je le souhaite, quand je valide mon formulaire avec un/des champs vides, la page modal ne ferme pas...mais côte serveur, la page modal ferme, chose qui me dérange.

Je souhaite donc que côté serveur, ma page modal réagisse comme côte client, c'est à dire que même quand je supprime l'attribut "required" et que je tiens seulement compte des validations côté serveur, si je valide le formulaire avec un/des champs vides, la page ne ferme pas et m'affiche le message d'erreur que j'aurais programmé.

Merci de m'apporter votre expertise.