如何防止文本輸入形式為空輸入？

Question

這是我的HTML-

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> My Shopping List</title>
<link rel="stylesheet" type="text/css" href="shoppinglist.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400|Advent+Pro:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script> 
<script type="text/javascript" src="shoppinglist.js"></script>
</head>

<body>
    <div class="container">
        <p id="shoppinglist"> My Shopping List App</p>

<input type="text" name="user" class="entertext">
<input type="button" value="Enter" class="returnkey">
<br>
<br>
    <ol></ol>
    </div>
</body>
</html>

這是我的JavaScript-

$(document).ready(function () {
    $("input[type='button']").on("click", function() {
        var item = $("input[type='text']").val();
        $("ol").append("<li style='display:none;'>"+ item+"<input type='checkbox'></li><br />");
        $("li:last").show("clip");
    });
    $("input[type='text']").keyup(function(event) {

       if(event.keyCode == 13) {

          $("input[type='button']").click(); 
       }
   });
   $("ol").on("click", "input[type='checkbox']", function() {
       $(this).parent().remove();   
   });

});

如何為輸入為空的人創建JavaScript？ 有什么辦法可以防止他們輸入空文本？

Answer 1

您可以檢查文本輸入的值是否等於空白字符串：

$("input[type='button']").on("click", function() {
    var item = $("input[type='text']").val();

    //start new code
    if ($.trim(item) === '') {
        alert("Please Enter Something!");
        return false;
    }
    //end new code

    $("ol").append("<li style='display:none;'>"+ item+"<input type='checkbox'></li><br />");
    $("li:last").show("clip");
});

$.trim()刪除任何多余的空格，以確保輸入不只是將空格作為值。

Answer 2

像這樣嗎

$('.returnkey').on('click', function() {

  var string = $.trim($('.entertext').val());

  if (string == '') {
     alert('Field is empty');
     return false;
  }
}

如何防止文本輸入形式為空輸入？

問題描述

2 個解決方案

解決方案1
3 已采納 2013-09-16 20:01:11

解決方案2
1 2013-09-16 20:00:58

如何防止文本輸入形式為空輸入？

問題描述

2 個解決方案

解決方案1 3 已采納 2013-09-16 20:01:11

解決方案2 1 2013-09-16 20:00:58

解決方案1
3 已采納 2013-09-16 20:01:11

解決方案2
1 2013-09-16 20:00:58