我正在使用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)
}
})
答案 0 :(得分:2)
: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>