Question

我正在使用html / css和javascript和mongoDB构建一个简单的聊天应用程序。该应用程序工作正常，但我想添加一个检查，以检查name的值是否不为空。我认为代码是正确的，但它总是会触发。

这是与问题相关的html代码。

<input id="name" class="form-control" placeholder="Name">

<textarea id="message" class="form-control" placeholder="Message"></textarea>

<button type="button" class="btn btn-success" id="send">Send</button>

这是执行检查的javascript，它始终会触发。

$("#send").click(() => {
    if ($('#name').is(':empty')){
        alert("Name cant be empty");
    } else {
        var message = {name: $("#name").val(), message: $("#message").val()}
        postMessage(message)
    }
})

Answer 1

:empty（和empty()）旨在指示该元素没有子元素。在您的情况下，您想知道元素是否没有value，所以它不适用。

相反，使用val()获取值并测试其length。您还可以trim()来确保它不只是被空格填充。

$("#send").click(() => {
  if ($('#name').val().trim().length == 0) {
    alert("Name cant be empty");
  } else {
    var message = {
      name: $("#name").val(),
      message: $("#message").val()
    }
    postMessage(message)
  }
});

function postMessage(message) {
  console.log(message);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="name" class="form-control" placeholder="Name">
<textarea id="message" class="form-control" placeholder="Message"></textarea>
<button type="button" class="btn btn-success" id="send">Send</button>

或者，您可以将字段与提交按钮一起放在form中，并使用required属性，而不必进行显式JS验证。这样做还有一个好处，就是在提交文本框时，在文本框中按回车键也不会发送该值。

$("form").on('submit', (e) => {
  e.preventDefault();
  var message = {
    name: $("#name").val(),
    message: $("#message").val()
  }
  postMessage(message)
});

function postMessage(message) {
  console.log(message);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input id="name" class="form-control" placeholder="Name" required="true" />
  <textarea id="message" class="form-control" placeholder="Message" required="true"></textarea>
  <button type="submit" class="btn btn-success" id="send">Send</button>
</form>

为什么此事件总是触发？

1 个答案: