Question

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.

目前,我把这两条放在了两个不同的工具中,我如何把这两条合并在一起,并用一个单一工具显示。

<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/>rel=“nofollow” http://jsfiddle.net/ddrYp/6/。

Answer 1

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

。

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/

Answer 2

Try this http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Answer 3

Here you go :

<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){
        $(".tooltip").append($("#password-error"));
        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>

。

Answer 4

我先验了这一点,但应当予以罚款。以你的工作为榜样:

if(!valid){
    document.getElementById("password-error").style.display="block";
}
else {
    document.getElementById("password-error").style.display="none";
}

为此:

$tooltip = $(".tooltip"); 
if(!valid && $tooltip.find("div.error").length < 1){
  $tooltip.append("<div class= error >"+$("#password-error").html()+"</div>");
}
else if(valid) {
  $tooltip.find(".error").remove();
}

友情链接