ASP.NET - Password Strength Indicator using jQuery and XML

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>