CODEWITHSUNDEEP
javascriptjqueryvalidation
VK Chikkadamalla
VK Chikkadamalla

Reputation: 239

how to show the error message

i want to insert the details when click on button in that time i want to validate and same time i want o show the error message on top.

I am validating but i not able to show the error message where exactly getting problem i not fining any one please help.

$(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>

Upvotes: 1

Views: 905

Answers (2)

Ankur srivastava
Ankur srivastava

Reputation: 26

it should be 

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

Also you may need to return false in case of error otherwise you will never see the error message appending in your <p> tag.

The code should go like this:

$(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;
});

Upvotes: 1

Manwal
Manwal

Reputation: 23816

You should use FirstName instead of FirstName.val(). Because of with line var FirstName=$('#fName').val(); you have already assigned value to FirstName, and while accessing FirstName.val() must be giving you error (Check console in Developer tools).

Consider following snippet:

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

Upvotes: 0

Related Questions