'jQuery trim and length

I have the following HTML and jQuery code

$("#addNeedleButton").click(function() {
  var needle = $("#needleName").val();
  needle = needle.trim();
  if (needle.length == 0) {
    $("#addNeedleManagement").submit(function(e) {
      e.preventDefault();
      er("Please key in a Needle Type");
    });
  }
});

  function er($message){
    var errorDisplay = $message;
    $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
    $('#errorDisplay').show();
    $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function(){
        $("#errorDisplay").slideUp(1000);
    });
   }

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name" required>
      </div>
    </div>
  </div>
  <button type="submit" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>

What I need is to prevent form submission if the input field is empty or it contains only white spaces. But somehow this code is not working. If I didn't key in anything, then it supposed to show the error message. But it is not triggering. If I put empty spaces, then it is working correctly by calling the error message. But if I keyed in some string, the error message still popping out.

Does anyone know why?

jquery html

Solution 1:^[1]

<html>
<title>

</title>

<head>


</head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<body>
    <form method="post" id="addNeedleManagement" name="addNeedleManagement">
        <div class="form-group">
            <div class="row">
                <div class="col-sm">
                    <label for="addNeedle">Needle Type</label>
                    <input required type="text" class="form-control" id="needleName" name="needleName"
                        placeholder="New needle name" title="Please key in the new needle name">
                    <span id="errorDisplay"><span>
                </div>
            </div>
        </div>
        <button type="button" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
    </form>
    <script>
        $("#addNeedleButton").click(function () {
            var needle = $("#needleName").val();
            needle = needle.trim();
            if (needle.length == 0) {
                //   $("#addNeedleManagement").submit(function(e) {
                //    e.preventDefault();

                er("Please key in a Needle Type");
return false;

                // });
            }
        });

        function er(message) {
            var errorDisplay = message;
            $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
            $('#errorDisplay').show();
            $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function () {
                $("#errorDisplay").slideUp(1000);
            });
        }
    </script>
</body>

</html>

Solution 2:^[2]

You made couple of mistakes here,

Here you are checking if there is no value, then submit form + show error. no need for that, just show the error in if there is no value and in the else part, you need to call the submit event.

Check the snippet

if (needle.length == 0) {
    $("#addNeedleManagement").submit(function(e) {
      e.preventDefault();
      er("Please key in a Needle Type");
    });
  }

$("#addNeedleManagement").on('submit', function(event) {
   event.preventDefault();
  var needle = $("#needleName").val();
  needle = needle.trim();
  
  if (!needle) {
  er("Please key in a Needle Type");
    return false
  }else{
  //  Here is your submit ajax call
}
});

  function er($message){
    var errorDisplay = $message;
    $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
    $('#errorDisplay').show();
    $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function(){
        $("#errorDisplay").slideUp(1000);
    });
   }

#errorDisplay{
  color: red
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name" required>
      </div>
    </div>
  </div>
 
  <button type="submit" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>
   <div id ="errorDisplay"></div>

Solution 3:^[3]

I hope you have enough answers with code, but just to let you know the answer to your question for why your code isn't triggering the error on click is;

When the user clicks the button, we get, trim and store the value in var needle and then check the length to see if it's empty.

Now what happens is, there is already a binding for the event with your button click so when you try to submit the form it doesn't work as expected to result in the control to go out of the click event listener. Even though it could be fixed using unbind(). It's not considered a standard way.

Always submit form's using the submit().

Solution 4:^[4]

validate onsubmit and return false if validation not passed
no need to attach event on button click

$("#addNeedleManagement").submit(function(e) {
  var needle = $("#needleName").val();
  needle = needle.trim();
  if (needle.length == 0) {
    e.preventDefault();
    er("Please key in a Needle Type");

    return false;
  }
});

function er($message) {
  var errorDisplay = $message;
  $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
  $('#errorDisplay').show();
  $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function() {
    $("#errorDisplay").slideUp(1000);
  });
}

#errorDisplay { color: red; }

<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name" required>
      </div>
    </div>
  </div>
  <button type="submit" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>

<div id="errorDisplay"></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Solution 5:^[5]

The following will fix your issue, you were binding submit event and for the first time the if the input is empty the binding for the event will prevent the next the attempt event if the input have value.

$("#addNeedleButton").click(function() {
  var needle = $("#needleName").val();
  needle = needle.trim();
  if (needle.length === 0) {
    $("#addNeedleManagement").submit(function(e) {
      e.preventDefault();
    });
   er("Please key in a Needle Type");
  } else {
    $("#addNeedleManagement").unbind();
    $("#addNeedleManagement").submit();
  }
});

  function er($message){
    var errorDisplay = $message;
    $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
    $('#errorDisplay').show();
    $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function(){
        $("#errorDisplay").slideUp(1000);
    });
   }

<div id="errorDisplay"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name" required>
      </div>
    </div>
  </div>
  <button type="submit" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Akhil Aravind
Solution 3	Nithin Suresh
Solution 4	Abdelrahman Gobarah
Solution 5	ROOT

'jQuery trim and length

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]