1

Contexto
Preciso validar a caixa de seleção múltipla. É necessário validar a segunda caixa de seleção.

inserir a descrição da imagem aqui



Dúvida

Onde e como fazer estas validações? No php ou no javaScript?

Lógica da Validação

inserir a descrição da imagem aqui

Códigos:

Modal de localidade: apresenta a caixa de seleção múltipla da página 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--> 



Arquivo projeto-cadNovasLocalidades.js para cadastrar novas localidades (chama o método localidadesAtivas do php)

   $("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;
});



Método localidadesAtivas da classe ProjetoController.php: cadastra as novas localidades

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'
                        ]);
    }



Arquivo projeto-localidades.js para mover os dados da caixa de seleção

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"));
};  
4
  • o que exatamente você precisa? Validar se tem itens selecionados? quantidade de itens?.... Na minha opiniao a validação inicial em javascript e uma basica (por exemplo, se tem itens selecionados) em server-side.
    – Eloa
    9/05/2018 às 13:48
  • Trata-se de validar os itens selecionados, a segunda caixa de seleção.
    – Ruama
    9/05/2018 às 13:59
  • @aa_sp É necessário fazer 3 tipos de validações: 1. se o tamanho dos arrays são iguais, 2. se o tamanho dos arrays são diferentes, 3. se os dados dos arrays são iguais.
    – Ruama
    9/05/2018 às 19:57
  • @aa_sp . Corrigindo as validações: 1. tamanho dos arrays = 0 (não faz nada), 2. Tamanho dos arrays são diferentes (apaga os dados do banco e salva o array final), 3. Tamanho dos arrays são iguais (apaga os dados do banco e salva o array final).
    – Ruama
    9/05/2018 às 20:24

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .