jQuery 修剪和长度

Question

jQuery 修剪和长度

我有以下 HTML 和 jQuery 代码

$("#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);
    });
   }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

如果输入字段为空或仅包含空格，我需要的是防止表单提交。但不知何故，这段代码不起作用。如果我没有输入任何内容，那么它应该显示错误消息。但它不会触发。如果我放了空格，则通过调用错误消息它可以正常工作。但是如果我输入一些字符串，错误信息仍然会弹出。

有谁知道为什么？

Answer 1

Aka*_*pta 7

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，11 月前
查看次数：	234 次
最近记录：	5 年，11 月前