Simplification of the jQuery code

Question

Hi, I’m starting programming in jQuery. I’ve moved a little but I don’t know that much. I am making a simple code for checking blank fields in inputs from a login screen.

This is the code:

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

Dice:

-enter is the login Submit button

-numeroSerie, user and pass are the inputs.

The code is working ok, but I feel like I’m spending a lot of code for this, I know there’s a simplified way, someone there could give me a moral to learn how to do it in a better and more organized way?

I’ll leave a simple example of code there:

$(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>

Well, simply put, I’d just like to join the verification of those three in one.

Thank you guys.

Answer 1

You can use the function .filter() 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>

The filter will apply .val('') the elements that pass the function test, that is, those that meet the !$(e).val().trim(); (emptiness).

The selector $("[required]", $(this).closest("form")) search within the form all elements that have the attribute required.

Obs.:

The code

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

is the same as

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

Answer 2

You mean something like that?

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

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

There may be a mistake or two, but I think that’s it.

Answer 3

I think you can simplify it this way:

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

Still working link https://jsfiddle.net/pr8d3qxk/

Answer 4

An alternative is to make a each() for each input of div or form. In the example assign an id to the form and I used the code below:

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

Follows the fiddle.