CODEWITHSUNDEEP
jqueryhtmlvalidation
natem1270
natem1270

Reputation: 207

Password Validation Jquery

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

Answers (2)

JudeOtenyo
JudeOtenyo

Reputation: 11

  • 1) Don’t forget the semicolons and the brackets, very important
  • 2) The length you want is for the value in the element and not the element itself

    ($entered.val()).length; and not $entered.length;

  • 3) include an else to make the message go away or replace the message with another if the condition is fulfilled.
  • 4) If the label has an id using the id alone will perform the same purpose you want you don’t have to include the element tag.

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

Korgrue
Korgrue

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

Related Questions