Question

我希望在单击按钮的时候插入详细信息，我想要验证，同时我想要在顶部显示错误消息。

我正在验证，但我无法显示错误消息，哪里有问题我没有罚款任何人请帮忙。

$(document).on('click', '#button', function () {
	var FirstName=$('#fName').val();
	alert(FirstName);
	var LastName=$('#lName').val();
	
	
	 if(FirstName.val() == '') {
		 alert("kk")
		 $("#error").append("Please eneter First Name");
	    }
	    else if(LastName.val() == '') {
	        alert("k")
		 $("#error").append("Please eneter Last Name");
	    }
});

<!DOCTYPE HTML>
<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>SSSIT</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    		<!--
    			<link rel="shortcut icon" href="images/favicon.png">
    			<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
    		-->
    		<link href="jqueryMobile/jquery.mobile-1.4.5.css" rel="stylesheet">
    		<link rel="stylesheet" href="css/main.css">
    		<script>window.$ = window.jQuery = WLJQ;</script>
    		<script src="jqueryMobile/jquery.mobile-1.4.5.js"></script>
    	</head>
    	
    	<body style="display: none;">
    		<div data-role="page" id="page">
				<div data-role="header" id="header" data-position="fixed">
					<h3>Softpath Technologies</h3>
				</div>
				<div data-role="content" style="padding: 15px;margin-top:21px">
					<p id="error"></p>
					<label for="text">First Name:</label>
						<input type="text" name="text" id="fName">
					<label for="text">Last Name:</label>
						<input type="text" name="text" id="lName">
					<a href="" data-role="button" id="button" onclick="dtlsSubmit()">SUBMIT</a>
		</div>
				<div data-role="footer" data-position="fixed" id="footer">
					<h3></h3>
				</div>
	</div>
    		
    		
    		
    		
    		<script src="js/initOptions.js"></script>
    		<script src="js/main.js"></script>
    		<script src="js/messages.js"></script>
    	</body>
</html>

Answer 1

应该是

if(FirstName == '') {
    alert("kk");
    $("#error").append("Please eneter First Name");
}
else if(LastName == '') {
    alert("k")
    $("#error").append("Please eneter Last Name");
}

此外，您可能需要在出现错误时返回false，否则您将永远不会在<p>标记中看到附加的错误消息。

代码应该是这样的：

$(document).on('click', '#button', function() {

    var FirstName = $('#fName').val();

    alert(FirstName);
    var LastName = $('#lName').val();
    var valid = 1;

    if ( FirstName == '' ) {
        alert("kk")
        $("#error").append("Please eneter First Name");
        valid = 0;
    }
    else if ( LastName == '' ) {
        alert("k")
        $("#error").append("Please eneter Last Name");
        valid = 0;
    }
    if ( !valid )
        return false

    return true;
});

Answer 2

您应该使用FirstName代替FirstName.val()。由于使用了行var FirstName=$('#fName').val();，您已经为FirstName分配了值，而访问FirstName.val()时必须给您错误（在开发人员工具中检查控制台）。

请考虑以下代码段：

if(FirstName == '') {
    alert("kk")
    $("#error").append("Please eneter First Name");
}
else if(LastName == '') {
    alert("k")
    $("#error").append("Please eneter Last Name");
}

如何显示错误消息

2 个答案: