2

Olá,

Com a função abaixo, eu valido campos obrigatório.

Neste caso, eu não uso esta função para submeter o formulário, mas sim para adicionar items ao objeto.

Porém, eu quero dar foco no primeiro elemento obrigatório.

Algo do tipo: $('#elemento')[0].focus.

Podem me ajudar?

campos = ['#txt-cep', '#txt-logradouro', '#txt-bairro', '#txt-cidade', '#txt-uf'];

if (campo_obrigatorio(campos)) {
    //faça algo
}

function campo_obrigatorio(campos) {
    var ret = true;
    for (i = 0; i < campos.length; i++) {
        var $form_line = $(campos[i]).parent();
        if (!$(campos[i]).val()) {		
            if (!$form_line.hasClass('error focused')) {
                $form_line.addClass('error focused');
    		//$form_line.find($(campos[i]).focus());
             }
             ret = false;
        }
        else {
            if ($form_line.hasClass('error focused')) {
                $form_line.removeClass('error focused');
            }
        }
    }
    return ret;
}

1 Resposta 1

1

O erro está nesta linha:

$form_line.find($(campos[i]).focus());

O .focus() deve ficar fora dos parênteses do .find:

$form_line.find($(campos[i])).focus();

Porém, da forma que está fazendo não irá selecionar o primeiro, mas sempre o último.

Neste caso, selecione o primeiro elemento pelas classes após a conclusão do laço for:

$(".error.focused:eq(0) input").focus();

Exemplo:

campos = ['#txt-cep', '#txt-logradouro', '#txt-bairro'];

if (campo_obrigatorio(campos)) {
    //faça algo
}

function campo_obrigatorio(campos) {
    var ret = true;
    for (i = 0; i < campos.length; i++) {
        var $form_line = $(campos[i]).parent();
        if (!$(campos[i]).val()) {
            if (!$form_line.hasClass('error focused')) {
                $form_line.addClass('error focused');
             }
             ret = false;
        }
        else {
            if ($form_line.hasClass('error focused')) {
                $form_line.removeClass('error focused');
            }
        }
    }
    
    $(".error.focused:eq(0) input").focus();
    
    return ret;
}
.error.focused{
   background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
   <p>
      <input type="text" id="txt-cep" value="texto">
   </p>
   <p>
      <input type="text" id="txt-logradouro">
   </p>
   <p>
      <input type="text" id="txt-bairro">
   </p>
</form>

4
  • obrigado pelo retorno, mas se eu manter $(campos[i]) vai focar sempre no ultimo elemento obrigatório e seu eu alterar para $(campos[0]) irá focar somente no primeiro campo, sendo que se eu preencher o primeiro campo, o foco não passa para o segundo campo obrigatório. Commented 4/12/2018 às 12:55
  • Melhor, faltava o return false, agora deu certo. Porem a classe error focused só se aplicou ao campo com foco, teria como aplicar em todos os campos obrigatórios e manter o foco no primeiro camo não preenchido ? Commented 4/12/2018 às 13:01
  • Alterei a resposta.
    – Sam
    Commented 4/12/2018 às 13:08
  • Funcionou muito bem, obrigado @Sam.. Commented 4/12/2018 às 13:15

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .