為什么此事件總是觸發？

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>