How to prevent empty input in text input form?

Question

Here is my 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>

Here is my 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();   
   });

});

How do I create JavaScript for someone whose entering empty? So something to prevent them from empty text input?

Answer 1

You can check if the value of the text input is equal to a blank string:

$("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() removes any extra white-space, to make sure the input doesn't just have white-space as a value.

Answer 2

Something like this?

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

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

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

How to prevent empty input in text input form?

Question

2 answers

solution1
3 ACCPTED 2013-09-16 20:01:11

solution2
1 2013-09-16 20:00:58

How to prevent empty input in text input form?

Question

2 answers

solution1 3 ACCPTED 2013-09-16 20:01:11

solution2 1 2013-09-16 20:00:58

solution1
3 ACCPTED 2013-09-16 20:01:11

solution2
1 2013-09-16 20:00:58