error message fields required

Question

I have a modal that registers some information, and I need the error message (the one in bold) to appear only when the user forgets to fill in information such as identification, box type and status.

<div class="modal fade" id="CadastrarColmeia" tabindex="-1" role="dialog" aria-labelledby="CadastrarColmeia" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cadastrar Colmeia</h5>
<img src = "img/colmeia.png" style="width: 50px">
</div>
<div style="margin: 5px;" id="MsgCadastroErroColmeia" class="alert alert-danger hide" role="alert">
Preencha os campos requeridos!
</div>
<div class="modal-body">
<form method="post" action="api/cadastrarColmeia.php">

<div class="form-row"> 
<div class="form-group col-md-6" >
<label for="inputCod">Identificação</label>
<input name="identificacao_colmeia" type="text" class="form-control" id="inputCod" placeholder="Identificação">
</div>
<div class="form-group col-md-6" >
<label for="inputCod">Data de alojamento</label>
<input name="alojamento_colmeia" type="date" class="form-control" id="inputAlojamento" placeholder="Data">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Tipo de caixa</label>
<select name="tipo_caixa_colmeia" id="tipo_caixa_colmeia" class="form-control" required>

<option selected disabled="">Tipo de caixa</option> 
<?php 

require_once "api/conexao.php";

try {
$prepared = $conexao_pdo->prepare("select * from tipo_caixa");
$prepared->execute();

if ($result = $prepared->fetchAll()) {
for ($i=0; $i < sizeof($result); $i++) { 
echo "<option value='". $result[$i]["cod"] ."'>". $result[$i]["tipo"] ."</option>";
}
} else {
echo "<option></option>";
}
} catch (PDOException $e) {
echo "<option></option>";
}   

?>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputEspecieAbelha">Espécie das Abelhas</label>
<input name="especieabelha_colmeia" type="text" class="form-control" id="inputEspecieAbelha" placeholder="Espécie das Abelhas">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputAddress" style="line-height: 1.5; margin-left: 185px; vertical-align: middle;">Coordenadas</label>
<input name="latitude_colmeia" type="text" class="form-control" id="inputAddress" placeholder="Latitude">
</div>
<div class="form-group col-md-6">
<label for="inputAddress2">.</label>
<input name="longitude_colmeia" type="text" class="form-control" id="inputAddress2" placeholder="Longitude">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6" >
<label for="inputQuadros">Nº de quadros</label>
<input name="numQuadros_colmeia" type="number" class="form-control" id="inputQuadros" placeholder="Número de quadros ">
</div>
<div class="form-group col-md-6" >
<label for="inputQuadrosCria">Nº de quadros com cria</label>
<input name="numQuadrosCria_colmeia" type="text" class="form-control" id="inputQuadrosCria" placeholder="Quadros com cria">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6" >
<label for="inputPotencialProdutivo">Potencial produtivo (kg)</label>
<input name="potencialProdutivo_colmeia" type="number" class="form-control" id="inputPotencialProdutivo" placeholder="Potencial Produtivo">
</div>
<div class="form-group col-md-6" >
<label for="inputStatus">Status</label>
<select name="status_colmeia" id="status_colmeia" class="form-control" required>

<option selected disabled="">Status</option>
<?php 

require_once "api/conexao.php";

try {
$prepared = $conexao_pdo->prepare("select * from status");
$prepared->execute();

if ($result = $prepared->fetchAll()) {
for ($i=0; $i < sizeof($result); $i++) { 
echo "<option value='". $result[$i]["cod"] ."'>". $result[$i]["desc"] ."</option>";
}
} else {
echo "<option></option>";
}
} catch (PDOException $e) {
echo "<option></option>";
}   

?>
</select>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Observações</span>
</div>
<textarea name="observacoes_colmeia" class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button id="buttoneviarcolmeia" onclick="ErroColmeia()" type="submit" class="btn btn-primary">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Answer 1

Change your class .hide for .d-none (assuming you are using BS4) in the alert div:

                                                                                  ↓
<div style="margin: 5px;" id="MsgCadastroErroColmeia" class="alert alert-danger d-none" role="alert">
   Preencha os campos requeridos!
</div>

This will make the div hidden at first.

Put a value empty in the first option of selects with required:

<option selected disabled value="">Tipo de caixa</option>
                            ↑

Then you can create a Event Handler to listen to the click on the "save" button, so you can remove the onclick="ErroColmeia()" button and script the code:

$("#buttoneviarcolmeia").on("click", function(){

   // busca os campos "required"
   var required = $("#CadastrarColmeia form [required]");

   required.each(function(){
      if(!this.value.trim()){
         $("#MsgCadastroErroColmeia").removeClass("d-none");
         return; // aborta o laço .each()
      }
   });

});

Clicking on the "save" button will trigger the Event Handler that will fetch in the form all elements with the attribute required, then go through each and check if it has value. If any has no value, it will remove the class .d-none displaying the alert.