Autocomplete form and check in JSON if it exists

Question

I am trying to make a form that works as follows, the user must put his CPF and the full name will auto-complete, and the form can only be sent if everything is ok in JSON.

Follows layout the model:

Follow the code on my form:

<form class="needs-validation" novalidate="">
            <div class="row">
              <div class="col-md-12 mb-4">
                <input type="text" class="form-control" id="cpf" placeholder="CPF:" value="" required="">
                <div class="invalid-feedback">
                  Informação inválida.
                </div>
              </div>

              <div class="col-md-12 mb-4">
                <input type="text" class="form-control" id="nomecomp" placeholder="Nome Completo:" value="" required="">
                <div class="invalid-feedback">
                  Informação obrigatória.
                </div>
              </div>

              <div class="col-md-12 mb-4">
                <input type="text" class="form-control" id="funcao" placeholder="Função:" value="" required="">
                <div class="invalid-feedback">
                  Informação obrigatória.
                </div>
              </div>



              <label for="genero" class="col-sm-2 mb-4 col-form-label">Gênero</label>
              <div class="col-md-10 mb-3">
                <select class="custom-select d-block w-100" id="genero" required="">
                  <label for="genero">Gênero</label>
                  <option value="">Selecionar...</option>
                  <option>Masculino</option>
                </select>

                <div class="invalid-feedback">
                  Informação obrigatória.
                </div>
              </div>

              <label for="empresa" class="col-sm-2 mb-4 col-form-label">Empresa</label>
              <div class="col-md-10 mb-3">
                <select class="custom-select d-block w-100" id="empresa" required="">
                  <label for="empresa">empresa</label>
                  <option value="">Selecionar...</option>
                  <option>Empresa 1</option>
                </select>

                <div class="invalid-feedback">
                  Informação obrigatória.
                </div>
              </div>

              <label for="regional" class="col-sm-2 mb-4 col-form-label">Regional</label>
              <div class="col-md-10 mb-3">
                <select class="custom-select d-block w-100" id="regional" required="">
                  <label for="regional">regional</label>
                  <option value="">Selecionar...</option>
                  <option>Regional 1</option>
                </select>

                <div class="invalid-feedback">
                  Informação obrigatória.
                </div>
              </div>

              <label for="filial" class="col-sm-2 mb-4 col-form-label">Filial</label>
              <div class="col-md-10 mb-3">
                <select class="custom-select d-block w-100" id="filial" required="">
                  <label for="filial">regional</label>
                  <option value="">Selecionar...</option>
                  <option>Regional 1</option>
                </select>

                <div class="invalid-feedback">
                  Informação obrigatória.
                </div>
              </div>

              <label for="hospedagem" class="col-sm-3 mb-4 col-form-label">Hospedagem</label>
              <div class="col-md-9 mb-3">
                <select class="custom-select d-block w-100" id="filial" required="">
                  <label for="filial">hospedagem</label>
                  <option value="">Selecionar...</option>
                  <option>Hospedagem 1</option>
                </select>

                <div class="invalid-feedback">
                  Informação obrigatória.
                </div>
              </div>

              <label for="locomocao" class="col-sm-3 mb-4 col-form-label">Locomoção</label>
              <div class="col-md-9 mb-3">
                <select class="custom-select d-block w-100" id="locomocao" required="">
                  <label for="locomocao">locomocao</label>
                  <option value="">Selecionar...</option>
                  <option>Locomoção 1</option>
                </select>

                <div class="invalid-feedback">
                  Informação obrigatória.
                </div>
              </div>



            </div>


            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" type="submit">Enviar</button></br>
            <small class="text-muted">Deseja cancelar o seu cadastro?</small>
          </form>

Structure of the JSON:

"Funcionários": [
    {
        "cpf": "00000000000",
        "nome": "NOME COMPLETO"
    },
    {
        "cpf": "00000000000",
        "nome": "NOME COMPLETO"
    },

Answer 1

@Sam I made the addition as you quoted but when I click send button, always appears the message: CPF or name does not exist in JSON

Modified code:

  // busca o cpf no JSON
          var dados = json["Funcionários"].filter(
             function(e){ return e.cpf == cpf }
          );

          if(!validar){
             // se não for para validar, insere o nome caso tenha encontrado o CPF
             // se não encontrar, esvazia o campo "nome"
             nome.value = dados.length ? dados[0].nome : '';
             funcao.value = dados.length ? dados[0].funcao : '';
             regional.value = dados.length ? dados[0].regional : '';
             empresa.value = dados.length ? dados[0].empresa : '';
             filial.value = dados.length ? dados[0].filial : '';


          }else{
             // validação: retorna true apenas se o CPF e o NOME baterem com
             // o que estiver no JSON
             return dados.length && dados[0].nome.value == nome && dados[0].cpf == cpf.value ? true : false;
             return dados.length && dados[0].funcao.value == funcao && dados[0].cpf == cpf.value ? true : false;
             return dados.length && dados[0].regional.value == regional && dados[0].cpf == cpf.value ? true : false;
             return dados.length && dados[0].empresa.value == empresa && dados[0].cpf == cpf.value ? true : false;
             return dados.length && dados[0].filial.value == filial && dados[0].cpf == cpf.value ? true : false;


          }

Answer 2

With some functions you can complete the field #nome according to the CPF typed and when submitting the form, verify that the data are correct (see explanatory comments in the code to understand).

I put in JSON two hypothetical CPF numbers to test: 123 and 456.

document.addEventListener("DOMContentLoaded", function(){
   var json = {"Funcionários": [
       {
           "cpf": "123",
           "nome": "NOME1"
       },
       {
           "cpf": "456",
           "nome": "NOME2"
       }
   ]};

   var cpf = document.getElementById("cpf");
   var nome = document.getElementById("nomecomp");
   
   // dispara ao submeter o formulário
   document.forms[0].onsubmit = function(e){
      e.preventDefault(); // só para exemplo. Exclua esta linha
      
      // verifica se o CPF existe e se os dados dos campos
      // são os mesmos do JSON
      if(buscaCpf(cpf.value, 1)){
         alert("Tudo certo!");
      }else{
         alert("CPF ou nome não existe no JSON");
      }
   }
   
   // pesquisa o CPF ao fazer blur no campo
   cpf.onblur = function(){
      buscaCpf(this.value);
   }
   
   function buscaCpf(CPF, validar){
      
      // busca o cpf no JSON
      var dados = json["Funcionários"].filter(
         function(e){ return e.cpf == CPF }
      );
      
      if(!validar){
         // se não for para validar, insere o nome caso tenha encontrado o CPF
         // se não encontrar, esvazia o campo "nome"
         nome.value = dados.length ? dados[0].nome : '';
   
      }else{
         // validação: retorna true apenas se o CPF e o NOME baterem com
         // o que estiver no JSON
         return dados.length && dados[0].nome == nome.value && dados[0].cpf == cpf.value ? true : false;
      }
   }
});

<form class="needs-validation" novalidate="">
<div class="row">
  <div class="col-md-12 mb-4">
    <input type="text" class="form-control" id="cpf" placeholder="CPF:" value="" required="">
    <div class="invalid-feedback">
      Informação inválida.
    </div>
  </div>

  <div class="col-md-12 mb-4">
    <input type="text" class="form-control" id="nomecomp" placeholder="Nome Completo:" value="" required="">
    <div class="invalid-feedback">
      Informação obrigatória.
    </div>
  </div>

  <div class="col-md-12 mb-4">
    <input type="text" class="form-control" id="funcao" placeholder="Função:" value="" required="">
    <div class="invalid-feedback">
      Informação obrigatória.
    </div>
  </div>



  <label for="genero" class="col-sm-2 mb-4 col-form-label">Gênero</label>
  <div class="col-md-10 mb-3">
    <select class="custom-select d-block w-100" id="genero" required="">
      <label for="genero">Gênero</label>
      <option value="">Selecionar...</option>
      <option>Masculino</option>
    </select>

    <div class="invalid-feedback">
      Informação obrigatória.
    </div>
  </div>

  <label for="empresa" class="col-sm-2 mb-4 col-form-label">Empresa</label>
  <div class="col-md-10 mb-3">
    <select class="custom-select d-block w-100" id="empresa" required="">
      <label for="empresa">empresa</label>
      <option value="">Selecionar...</option>
      <option>Empresa 1</option>
    </select>

    <div class="invalid-feedback">
      Informação obrigatória.
    </div>
  </div>

  <label for="regional" class="col-sm-2 mb-4 col-form-label">Regional</label>
  <div class="col-md-10 mb-3">
    <select class="custom-select d-block w-100" id="regional" required="">
      <label for="regional">regional</label>
      <option value="">Selecionar...</option>
      <option>Regional 1</option>
    </select>

    <div class="invalid-feedback">
      Informação obrigatória.
    </div>
  </div>

  <label for="filial" class="col-sm-2 mb-4 col-form-label">Filial</label>
  <div class="col-md-10 mb-3">
    <select class="custom-select d-block w-100" id="filial" required="">
      <label for="filial">regional</label>
      <option value="">Selecionar...</option>
      <option>Regional 1</option>
    </select>

    <div class="invalid-feedback">
      Informação obrigatória.
    </div>
  </div>

  <label for="hospedagem" class="col-sm-3 mb-4 col-form-label">Hospedagem</label>
  <div class="col-md-9 mb-3">
    <select class="custom-select d-block w-100" id="filial" required="">
      <label for="filial">hospedagem</label>
      <option value="">Selecionar...</option>
      <option>Hospedagem 1</option>
    </select>

    <div class="invalid-feedback">
      Informação obrigatória.
    </div>
  </div>

  <label for="locomocao" class="col-sm-3 mb-4 col-form-label">Locomoção</label>
  <div class="col-md-9 mb-3">
    <select class="custom-select d-block w-100" id="locomocao" required="">
      <label for="locomocao">locomocao</label>
      <option value="">Selecionar...</option>
      <option>Locomoção 1</option>
    </select>

    <div class="invalid-feedback">
      Informação obrigatória.
    </div>
  </div>



</div>


<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Enviar</button></br>
<small class="text-muted">Deseja cancelar o seu cadastro?</small>
</form>