Home/ Questions/Q 6787081
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:19:24+00:00

I’ve a user registration form and I want to show the password rules in

  • 0

I’ve a user registration form and I want to show the password rules in small tool tip along with the validation message like invalid password or valid password.My password rule is it contains 7 letters, 1 digit and 1 upper case letter etc.

Currently I’ve both of these but showing it in two different tool tip how can I merge two and show it in a single one.

<html>
<head>
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
    <title>Test</title>
</head>
<script>
function validatePassword(obj) {
    //rule contains 7 chars and upper case and lower case and digit
    var password = obj.value;
    var numLowers = 0;
    var numCaps = 0;
    var numDigits = 0;
    var valid = true;
    if(password.length > 7) {
        for(i = 0; i < password.length; i++) {
            var charCode = password.charCodeAt(i);
            if(charCode >= 48 && charCode <= 58 )
            numDigits++;
            else if(charCode >= 65 && charCode <= 90 )
            numCaps++;
            else if(charCode >= 97 && charCode <= 122 )
            numLowers++;
        }
        if(numDigits < 1 || numCaps < 1 )
        valid = false;
    }
    else {
        valid = false;
    }
    if(!valid){
        document.getElementById("password-error").style.display="block";
    }
    else {
        document.getElementById("password-error").style.display="none";
    }
}
</script>

<body>
    <div>
        <form id="test" action ="#">
        <div id="password-container">
            <input type="text" id= "password" name="password" size="30" onKeyUp="validatePassword(this)"  title=" Password contains 7 -20characters <br/> and upper case and digits." />
        </div>
        <div id="password-error" class="error" style="display:none;">Invalid Password</div>
        </form>
    </div>
</body>
</html>

$("#test :input").tooltip({

    // place tooltip on the right edge
    position: "center right",

    // a little tweaking of the position
    offset: [-2, 10],

    // use the built-in fadeIn/fadeOut effect
    effect: "fade",

    // custom opacity setting
    opacity: 0.7

});

You can see a working example here

http://jsfiddle.net/ddrYp/6/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a solution, you won’t need to use both the tooltip and password error div.

    http://jsfiddle.net/ddrYp/12/

    But you may run into problems with this in the future because the tooltips are not uniquely identified. I’m not familiar with the plugin, but if you could add an individual ID to each tooltip, that’s fix it for you. Once you do that, you could reference the tooltips by using their ID instead of $(“.tooltip”)… if you expand this to have multiple inputs when you do $(".tooltip").append(/*something*/) or $(".tooltip").HTML(/*something*/) you’re going to modify every tooltip.. which may not matter, because only one is visible at a time… but it’s still an inefficiency issue and a bit of a bug

    Here’s the example of the ebay password verification example that you were looking for:
    http://jsfiddle.net/cFrpz/7/

    • 0