ASP.NET - Password Strength Indicator using jQuery and XML - Update 4

ASP.NET - Password Strength Indicator using jQuery and XML (v01.03.00)

Couple weeks ago a CodeProject member reported that the "Password Strength Indicator using jQuery and XML plug-in" is displaying duplicate indicators. Yesterday, I was trying to integrate the plug-in with the MVC 3 application and ran into the mentioned issue.

Figure 1

After spending some time digging into it, I noticed that there was a problem with the jQuery id selectors. I should use the Attribute Equals Selector [id="value"] instead of Attribute Ends with Selector [id$="value"]. The former selector selects elements that have the specified attribute with a value exactly equal to a certain value. The later selector selects elements that have the specified attribute with a value ending exactly with a given string. That explain why the bar indicator appears next to both the password and confirm password textboxes. I have updated the plug-in and here is the correct approach to use the plug-in.

Listing 1

<script type="text/javascript">
    $(document).ready(function () {
        var myPlugin = $("input[id='Password']").password_strength();

        $("[id='submit']").click(function () {
            return myPlugin.metReq(); //return true or false
        });

        $("[id='passwordPolicy']").click(function (event) {
            var width = 350, height = 300, left = (screen.width / 2) - (width / 2),
            top = (screen.height / 2) - (height / 2);
            window.open("PasswordPolicy.xml", 'Password_poplicy',
	    'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top);
            event.preventDefault();
            return false;
        });
    });
</script>

Resources

http://api.jquery.com/category/selectors/