PasswordStrengthIndicator_Modal

DIsplay passwordstrengthindicator inside a modal

by bryiantan

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<script src="https://blog.ysatech.com/js/jquery.password-strength-2.0.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <!-- Button trigger modal -->
    <button type="button" id="btnMymodal" class="btn btn-primary btn-lg">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div style="height: 400px">
                        <br />
                        <label for="txtPassword">
                            Enter Password:
                        </label>
                        <input id="txtPassword" type="text" />
                        <br />
                        <a id="passwordPolicyLink" href="#">Password policy</a>
                        <br />
                        <br />
                        <input id="btnSubmit" type="submit" value="Submit" />
                        <div id="result">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
  ...

JavaScript

$(document).delegate("#btnMymodal", "click", function (event) {

            $('#myModal').modal('show');

            setTimeout(function () {
                var myPlugin = $("[id='txtPassword']").password_strength({
                    appFolderXMLPath: '/MyXML/',
                    passwordPolicyLinkId: 'passwordPolicyLink'
                });
                $("[id='btnSubmit']").click(function () {
                    if (myPlugin.metReq()) {
                        $("#result").html("Password meet policy");
                    }
                });
            }, 500);
            
        });