How to validate select Multiple?

Asked

Viewed 134 times

1

Context
I need to validate the multiple checkbox. It is necessary to validate the second checkbox.

inserir a descrição da imagem aqui



Doubt

Where and how do these validations? In php or Java?

Logic of Validation

inserir a descrição da imagem aqui

Codes:

Locality modal: displays the multiple checkbox of the page edita.blade.php

  <!--Inicio do modal de Localidades--> 
  <div class="modal fade modal-default" id="modalLocalidade" aria-hidden="true" aria-labelledby="examplePositionCenter"
                 role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <h4 class="modal-title">Localidades</h4>
                        </div>
                        <div class="modal-body">

                            <div class="form-group col-md-18" style="display:flex">

                                <select multiple  class="esq  col-md-6" name="localidadesAtivas" required>
                                    @foreach($localidadesAtivas as $localidadeAtiva)
                                    <option value="{{$localidadeAtiva->id}}" {{$localidadeAtiva->id == $projeto->localidade_id ? 'selected' : ''}}>{{$localidadeAtiva->localidade}}</option>
                                    @endforeach   
                                </select>          

                                <div style="display:flex; flex-direction:column">
                                    <button class="dir">▶</button>
                                    <button class="esq">◀</button>
                                </div>

                                <select multiple class="dir col-md-6" name="localidadesAtivasSelects">
                                    @foreach($localidadesProjeto as $localidadeProjeto)
                                    <option value="{{$localidadeProjeto->id}}" {{$localidadeProjeto->id == $projeto->localidade_id ? 'selected' : ''}}>{{$localidadeProjeto->localidade}}</option>  
                                    @endforeach  
                                </select>
                           </div>

                        </div><!--Fim do modal-body-->

                        <div class="modal-footer">
                        <center>
                            <a id="btnSalvar" type="button" class="btn btn-primary cadNovaLocalidade" data-dismiss="modal"  align="center" style="width: 300px; height: 40px">Salvar</a>
                        </center>
                        </div>
                    </div>
                </div>
            </div>
  <!--Fim do modal de Localidades--> 



Project-cadNovasLocations.js file to register new locales (calls the php locale methodFeatures)

   $("input[name='numProjeto']").val();
   $("select[name='localidadesAtivasSelects'] option:selected").val();

});

//Ajax para autorizar documentação , e atualizar a página após a ação
$('.cadNovaLocalidade').click(function () {

    var idProjeto =  $("input[name='numProjeto']").val();

    $.ajaxSetup({
      headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  }); 

    var localidades = new Array();
    $("select[name='localidadesAtivasSelects'] option:selected").each(function(){
    localidades.push($(this).val());
    })



  $.ajax({
      url: "/projetos/localidadesAtivas",
      type: "GET",
      data: {numProjeto: idProjeto, localidadesAtivasSelects: localidades},
      dataType: "json"
  }).done(function (response) {
      console.log(response);
      if (response.success) {    

       setTimeout(() => {
            alert ('Sucesso ao Cadastrar Novas Localidades');
            window.location.reload();
        }, 4000);
      }
      else {
        alert("Erro ao Cadastrar Novas Localidades");
      }   
  }).fail(function (response) {
        alert ("Erro ao Cadastrar Novas Localidades");

  });
  return false;
});



Locality methodLiving the Projectocontroller.php class: register new localities

public function localidadesAtivas(Request $request, Projeto $projeto)
    {
        $projeto = $projeto->find($request->numProjeto);
        if (!$projeto)
            return response()->json(['error' => 'Projeto não encontrado'], 404);

            //Deleta as localidades existentes
            DB::table('localidades_projeto')->where('projeto_id', '=',  $projeto->id)->delete();

            //Salva as novas localidades
            $projeto->localidades_projeto()->attach($request->localidadesAtivasSelects);

        return response()
                    ->json([
                        'success' => 'Sucesso ao cadastrar novas localidades'
                        ]);
    }



Project-localities.js file to move the data from the checkbox

function mover(fonte, destino) {
  var selecionados = fonte.querySelectorAll("option:checked");
  for ( var i = 0 ; i < selecionados.length ; i++ ) {
      fonte.removeChild(selecionados[i]);
      destino.appendChild(selecionados[i]);
  }
} 

 document.querySelector("button.dir").onclick = function() {
    mover(document.querySelector("select.esq"),
          document.querySelector("select.dir"));
};

document.querySelector("button.esq").onclick = function() {
    mover(document.querySelector("select.dir"),
          document.querySelector("select.esq"));
};  
  • what exactly do you need? Validate if you have selected items? number of items?.... In my opinion the initial validation in javascript and a basic (for example, if you have selected items) in server-side.

  • It is about validating the selected items, the second checkbox.

  • @aa_sp It is necessary to make 3 types of validations: 1. if the size of the arrays is equal, 2. if the size of the arrays is different, 3. if the data of the arrays is equal.

  • @aa_sp . Correcting validations: 1. size of arrays = 0 (does nothing), 2. Size of arrays are different (deletes database data and saves final array), 3. Size of arrays are equal (deletes database data and saves final array).

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.