Reputation: 207
very new to javascript/jquery. I'm trying to display an error message if the user enters less than the desired number of characters and tries to move their mouse button out of the text box. I am unable to get the code to work. Any advice would be greatly appreciated!
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="jquery-3.1.1.min.js"></script>
</head>
<body id="bg">
<div class="main">
<form id="fillout">
<legend id="lgnd">
Login Credentials
</legend>
<label id="usrname">
Username:
<input type="text" name="user" maxlength="15">
</label>
<br/>
<label id="pwd">
Password:
<input id="entered" type="text" name="pass" maxlength="20">
</label>
<p id="feedback"></p>
</form>
</div>
<script>
$(function(){
var $feedback = $('li#feedback');
var $username = $('label#usrname');
var $entered = $('#entered');
var minpass = 8;
$username.on('mouseout', function(){
if ($entered.length < minpass)
$feedback.text("Password must be six characters")
})
});
</script>
</body>
</html>
Upvotes: 0
Views: 168
Reputation: 11
($entered.val()).length; and not $entered.length;
This will do what you wanted
$(function(){
var $feedback = $('#feedback');
var $username = $('#usrname');
var $entered = $('#entered');
var minpass = 8;
$username.on('mouseout', function(){
if (($entered.val()).length < minpass){
$feedback.text("Password must be six characters");
}else{ $feedback.text("proceed message"); }
});
});
however
it may not be a good idea to count the characters entered on mouseout as you are planning since one may never hover over eventhandler or even select the textbox using a keyboard or touchscreen hence defeating the whole purpose of the count. You would rather validate on submission of the form or even just when the focus is shifted from the textbox. Plus why put the event handler on the username when testing the password? I hope this helps though…
Upvotes: 1
Reputation: 3478
two small changes should get you what you need.
//get the selected or entered value first
var _val = $entered.val()
//now check the length of it
_val.length < minpass
Upvotes: 2