3

Olá, estou começando a programar em jQuery. Já mexi um pouco mas não conheço tanto. Estou fazendo um código simples para verificação de campos em branco nos inputs de uma tela de login.

Este é o código:

$("#enter").on("click", function () {
        if ($("#numeroSerie").val().trim() == "") {
            $("#numeroSerie").val("");
        }
        if ($("#user").val().trim() == "") {
            $("#user").val("");
        }
        if ($("#pass").val().trim() == "") {
            $("#pass").val("");
        }
    });

Dados:

-enter é o botão de submit do login

-numeroSerie, user e pass são os inputs.

O código está funcionando ok, mas eu sinto que estou gastando muito código pra isso, sei que há um jeito mais simplificado, alguém aí poderia me dar uma moral pra aprender como fazer de uma maneira melhor e mais organizada?

Vou deixar um exemplo simples de código aí:

$(document).ready(function () {
  $("#enter").on("click", function () {
      if ($("#numeroSerie").val().trim() == "") {
          $("#numeroSerie").val("");
      }
      if ($("#user").val().trim() == "") {
          $("#user").val("");
      }
      if ($("#pass").val().trim() == "") {
          $("#pass").val("");
      }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
Número de série: <input type="text" id="numeroSerie" required><br>
<br>Usuário: <input type="text" id="user" required><br>
<br>Senha: <input type="password" id="pass" required><br>
<br><input type="submit" id="enter">
</form>

Bom, simplificando, eu gostaria apenas de juntar a verificação desses três, em uma só.

Obrigado galera.

0

4 Respostas 4

4

Pode usar a função .filter() do jQuery:

$(document).ready(function () {
  $("#enter").on("click", function () {
     $("[required]", $(this).closest("form")).filter(function(i,e){
        return !$(e).val().trim();
     }).val('');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
Número de série: <input type="text" id="numeroSerie" required><br>
<br>Usuário: <input type="text" id="user" required><br>
<br>Senha: <input type="password" id="pass" required><br>
<br><input type="submit" id="enter">
</form>

O filter irá aplicar .val('') aos elementos que passarem no teste da função, ou seja, os que atenderem a condição !$(e).val().trim(); (vazio).

O seletor $("[required]", $(this).closest("form")) busca dentro do form todos os elementos que possuam o atributo required.

Obs.:

O código

$("[required]", $(this).closest("form"))

é o mesmo que

$(this).closest("form").find("[required]")
1
  • muito obrigado cara, funcionou perfeitamente!
    – user149429
    Commented 16/05/2019 às 16:45
2

Você quer dizer algo assim?

var values = ["#numeroSerie", "#user", "#pass"];

    forEach(value in values) {
        if($(value).val().trim() == ""){
            $(value).val("");
        }
    }

Não testei, pode haver um erro ou dois, mas acho que é isso.

1

Acho que você pode simplificar desta forma:

$(document).ready(function () {
  $("#enter").on("click", function () {
        $("input:required").each(function(){
        var _$this = $(this);
        _$this.val(_$this.val() == "" ? "" : _$this.val);
    });
  });
});

Segue link funcionando https://jsfiddle.net/pr8d3qxk/

1

Uma alternativa é fazer um each() para cada input do div ou form. No exemplo atribui um id ao form e usei o código abaixo:

$('#form1').submit(function(){
    $(this).find('input:text').each(function(){
        $(this).val($.trim($(this).val()));
        console.log('->' + $(this).val() + '<-');
    });
});

Segue o fiddle.

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