ablanco / jquery.pwstrength.bootstrap

jQuery Password Strength Meter for Twitter Bootstrap
GNU General Public License v3.0
376 stars 188 forks source link

Object doesn't support property or method 'pwstrength' #40

Closed StateBarofArizona closed 10 years ago

StateBarofArizona commented 10 years ago

I have the script on three other pages in the site and all work fine. I am having trouble getting it to work on a page in my admin screen. Same exact code, only difference is the password field is the only field on the form. I am getting "Object doesn't support property or method 'pwstrength'" no matter what I try. I tried adding another field, I tried renaming the password field, I took out the options, nothing seems to work.

@model Thinktecture.IdentityServer.Web.Areas.Admin.ViewModels.UserPasswordModel

@{
    ViewBag.Title = "Change Password for " + Model.Username;
}

<div id="pwd-container">
    @using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        @Html.ValidationSummary("Errors updating profile:")
        @Html.AntiForgeryToken()

        <fieldset class="editor small">
            <legend>@ViewBag.Title</legend>
            <div class="form-group">
                @Html.LabelFor(m => m.NewPassword, new { @class = "col-md-3 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.NewPassword, new { @class = "form-control" })
                    <div class="col-md-9" style="padding:0 18px 6px 20px;">
                        Strength: <div class="pwstrength_viewport_progress"></div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-4 col-md-8">
                    <button class="btn btn-default">Update</button>
                </div>
            </div>
        </fieldset>
    }
</div>

<nav class="links">
    <ul>
        <li>@Html.ActionLink("back to Users", "Index", "User", null, null)</li>
    </ul>
</nav>

<script type="text/javascript" src="~/Scripts/pwstrength.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        "use strict";
        var options = {};
        options.common = {
            minChar: 8,
            debug: true
            //    onLoad: function () {
            //        $('#messages').text('Start typing password');
            //    }
        };
        options.rules = {
            activated: {
                wordTwoCharacterClasses: true,
                wordRepetitions: true
            }
        };
        options.ui = {
            container: "#pwd-container",
            viewports: {
                progress: ".pwstrength_viewport_progress"
            },
            showVerdictsInsideProgressBar: true,
            showStatus: true,
            showErrors: true
        };
        $('#NewPassword').pwstrength(options);
    });
</script>

What could be the cause?

ablanco commented 10 years ago

I've made a version of this: http://jsfiddle.net/h884604w/ It works fine, you can use it to compare it with your code.

It seems like the node returned by $('#NewPassword') doesn't let you call the plugin. It looks like the plugin hasn't been properly loaded. Is it retrieving the JS without errors? Look for a 404 or something similar.

Good luck!