我试图编写一个Javascript代码来检查文本输入表单是否为空

时间：2017-02-11 20:08:09

标签： javascript jquery validation

我正在使用javascript构建一个待办事项应用。除验证外，一切都很完美。我写了几行代码来检查User是否输入了任何值。但它不起作用。我在下面粘贴了我的代码。感谢

＆＃13;
＆＃13; 
var inputTask = $("#inputTask").val();
	var submitTask = $("#display-taskList");
	var taskList = $("#taskList");
	var submitTask = $("#submit-task");

	
	submitTask.click(function(event) {
		event.preventDefault();
		
		if(inputTask === ''){
			alert("Add A Task")
		}
		else if(inputTask != ''){
			$("ol").append("<li>" + $("#inputTask").val() + "<span class='close'>" + "x" +"</span>" + "</li>" );
		}
		/*$("ol").append("<li>" + $("#inputTask").val() + "<span class='close'>" + "x" +"</span>" + "</li>" );
		$("#inputTask").val("");*/

			});



     $("ol").click(function() {
         	$("li").addClass('strike')
         });
＆＃13; 
html,body { height: 100%; margin: 0px; padding: 0px; }
		body{
			background: #F3904F; /* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
		}

		#center-block {
		    width:600px;
		    height: 100%;
		    padding:10px;
		    background: #F3904F; /* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		}

		#inputTask{
		width: 530px;
		height: 44px;
		margin-left: 30px;
		font: 16px arial,sans-serif;
    	line-height: 34px;
   		height: 34px !important;
   		margin-top: 20px;
   		margin-bottom: 25px
   		;
		}

		input[type=text]{
			background-color: #3B4371;
			font-family: 'Ubuntu', sans-serif;
		}

		input[type=text]:focus {
    	background-color: #fff;
    	font-family: 'Ubuntu', sans-serif;
    	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    	border: 3px solid #555;: 
		}

		#title{
		color: #fff;
		font-family: 'Ubuntu', sans-serif;
		text-transform: capitalize;
		}

		hr{
			width: 50;
		}

		button{
		margin-top: 10px;
		opacity: 0.5;
		cursor: default;
	    font-family: arial,sans-serif;
	    font-size: 15px;
	    font-weight: bold;
	    margin: 5px 30px 10px 30px;
	    min-width: 54px;
	    height: 30px;
	    padding: 0 16px;
	    text-align: center;
		}

		ol > li {
			color: #fff;
			font-family: sans-serif;
			font-size: 20px;
			background-color: #A9A9A9;
			margin-top: 5px;
			padding-left: 5px;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		
		
		li:hover{
			background: #808080;
			cursor: pointer;
		}

		.strike{
			text-decoration: line-through;
		}

		.close{
			color: red;
			font-size: 13px;
			float: right;
			padding-right: 5px;
		}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container" id="center-block">
<div class="row">
	<form>
		<h1 class="text-center" id="title">Simple to-Do list</h1>
		<hr width="50%">
		<input type="text" id="inputTask" name="" placeholder="Title...">
		<button id="submit-task">Hit Me!</button>
		<button id="submit-task">Clear List</button>
		</div>
	
	<div id="display-taskList">
		<h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3> 
		<ol></ol>
		</div>
	</form> 
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这里的问题是您在文档初始化时正确声明了inputTask变量。它在页面加载时从您的输入中检索一个值，此时输入框始终为空。

要解决此问题，请移动您的声明：

var inputTask = $("#inputTask").val();

在submitTask.click事件中。

	var submitTask = $("#display-taskList");
	var taskList = $("#taskList");
	var submitTask = $("#submit-task");

	
	submitTask.click(function(event) {
		event.preventDefault();
		var inputTask = $("#inputTask").val();
		if(inputTask === ''){
			alert("Add A Task");
		}
		else if(inputTask != ''){
			$("ol").append("<li>" + $("#inputTask").val() + "<span class='close'>" + "x" +"</span>" + "</li>" );
		}
		/*$("ol").append("<li>" + $("#inputTask").val() + "<span class='close'>" + "x" +"</span>" + "</li>" );
		$("#inputTask").val("");*/

			});



     $("ol").click(function() {
         	$("li").addClass('strike')
         });
html,body { height: 100%; margin: 0px; padding: 0px; }
		body{
			background: #F3904F; /* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
		}

		#center-block {
		    width:600px;
		    height: 100%;
		    padding:10px;
		    background: #F3904F; /* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #F3904F , #3B4371); /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #F3904F , #3B4371); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		}

		#inputTask{
		width: 530px;
		height: 44px;
		margin-left: 30px;
		font: 16px arial,sans-serif;
    	line-height: 34px;
   		height: 34px !important;
   		margin-top: 20px;
   		margin-bottom: 25px
   		;
		}

		input[type=text]{
			background-color: #3B4371;
			font-family: 'Ubuntu', sans-serif;
		}

		input[type=text]:focus {
    	background-color: #fff;
    	font-family: 'Ubuntu', sans-serif;
    	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    	border: 3px solid #555;: 
		}

		#title{
		color: #fff;
		font-family: 'Ubuntu', sans-serif;
		text-transform: capitalize;
		}

		hr{
			width: 50;
		}

		button{
		margin-top: 10px;
		opacity: 0.5;
		cursor: default;
	    font-family: arial,sans-serif;
	    font-size: 15px;
	    font-weight: bold;
	    margin: 5px 30px 10px 30px;
	    min-width: 54px;
	    height: 30px;
	    padding: 0 16px;
	    text-align: center;
		}

		ol > li {
			color: #fff;
			font-family: sans-serif;
			font-size: 20px;
			background-color: #A9A9A9;
			margin-top: 5px;
			padding-left: 5px;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		
		
		li:hover{
			background: #808080;
			cursor: pointer;
		}

		.strike{
			text-decoration: line-through;
		}

		.close{
			color: red;
			font-size: 13px;
			float: right;
			padding-right: 5px;
		}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container" id="center-block">
<div class="row">
	<form>
		<h1 class="text-center" id="title">Simple to-Do list</h1>
		<hr width="50%">
		<input type="text" id="inputTask" name="" placeholder="Title...">
		<button id="submit-task">Hit Me!</button>
		<button id="submit-task">Clear List</button>
		</div>
	
	<div id="display-taskList">
		<h3 style="color: #fff; font-family: 'Kanit';"> Task to accomplish</h3> 
		<ol></ol>
		</div>
	</form> 
	</div>
</div>

相关问题
最新问题