locked
Show the strength RRS feed

  • Question

  • User364663285 posted

    Hi,

    I expect to show the strength of password, by

    function pass_click() {
        $.confirm({
            title: 'Confirm Password',
            content: '' +
            '<form action="" class="formName">' +
            '<div class="form-group">' +
            '<label>Enter Password</label>:' +
            '<input type="password" placeholder="Your Password" class="name form-control" required />' +
            '<br/><label>Re-Confirm Password</label>:' +
            '<input type="password" placeholder="Your Password" class="newname form-control" required />' +
            '<br/><input type="label" class="status form-control" align="center" readonly="readonly" />' +
           '</div>' +
            '</form>',
            buttons: {
                formSubmit: {
                    text: 'Submit',
                    btnClass: 'btn-blue',
                    action: function () {
                        var name = this.$content.find('.name').val();
                        var newname = this.$content.find('.newname').val();
                        var status = this.$content.find('.status').val();
                        if (name == "") {
                            $.alert("Invalid password and please enter one valid password!");
                            return false;
                        }
    
                        if (name == newname) {
                            status = checkPassStrength(scorePassword(name));
                            $.alert('Valid Password is entered!');
                        }
                        else {
                            $.alert("Invalid Password is entered!");
                            return false;
                        }
                    }
                },
                cancel: function () {
                    //close
                },
            },
            onContentReady: function () {
                // bind to events
                var jc = this;
                this.$content.find('form').on('submit', function (e) {
                    // if the user submits the form by pressing enter in the field.
                    e.preventDefault();
                    jc.$$formSubmit.trigger('click'); // reference the button and click it
                });
            }
    
        });
        return false;
    };
    function scorePassword(pass) {
        var score = 0;
        if (!pass)
            return score;
    
        // award every unique letter until 5 repetitions
        var letters = new Object();
        for (var i = 0; i < pass.length; i++) {
            letters[pass[i]] = (letters[pass[i]] || 0) + 1;
            score += 5.0 / letters[pass[i]];
        }
    
        // bonus points for mixing it up
        var variations = {
            digits: /\d/.test(pass),
            lower: /[a-z]/.test(pass),
            upper: /[A-Z]/.test(pass),
            nonWords: /\W/.test(pass),
        }
    
        variationCount = 0;
        for (var check in variations) {
            variationCount += (variations[check] == true) ? 1 : 0;
        }
        score += (variationCount - 1) * 10;
    
        return parseInt(score);
    };
    function checkPassStrength(pass) {
        var score = scorePassword(pass);
        if (score > 80)
            return "strong";
        if (score > 60)
            return "good";
        if (score >= 30)
            return "weak";
    
        return "";
    };
    

    how to adjust the above?

    Friday, November 10, 2017 11:09 PM

Answers

  • User-707554951 posted

    Hi wmec

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" />
        <script>
            function pass_click() {        
                $.confirm({
                    title: 'Confirm Password',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Enter Password</label>:' +
                    '<input id="pass1" type="password" placeholder="Your Password" class="name form-control" required />' +
                    '<br/><label>Re-Confirm Password</label>:' +
                    '<input id="pass2" type="password" placeholder="Your Password" class="newname form-control" required />' +
                    '<br/><input type="label" class="status form-control" align="center" readonly="readonly" />' +
                   '</div><div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><div class="modal-content" style="width:390px"><div class="modal-header" style="width:390px"><button type="button" class="close" data-dismiss="modal">&times;</button><h5 class="modal-title">my-friend.co says</h5></div><div class="modal-body"><p>Some text in the modal.</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">OK</button></div></div></div></div>' +
                    '</form>',
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var newname = this.$content.find('.newname').val();
                                var status = this.$content.find('.status');
                                if (name == "") {
                                    $.alert("Invalid password and please enter one valid password!");
                                    return false;
                                }
                                if (name == newname) {
                                    // status.val(scorePassword(name));
                                    $.alert('Valid Password is entered!');
                                }
                                else {
                                    $.alert("Invalid Password is entered!");
                                    return false;
                                }
                            }
                        },
                        cancel: function () {
                            //close
                        },
                    },
    
                    onContentReady: function () {
                        // bind to events
                        var jc = this;
                        this.$content.find('#pass2').change(function () {
                            //alert("1");
                            var score = scorePassword($(this).prev().prev().prev().val())
                            $(this).next().next().val(score);
                            $(this).parent().next().find("p").html(score);
                            $(this).parent().next().modal("show");
                        });
    
                        this.$content.find('form').on('submit', function (e) {
                            // if the user submits the form by pressing enter in the field.
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click'); // reference the button and click it
                        });
                    }
                });
                return false;
            };
            function scorePassword(pass) {
                var score = 0;
                if (!pass)
                    return score;
                // award every unique letter until 5 repetitions
                var letters = new Object();
                for (var i = 0; i < pass.length; i++) {
                    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
                    score += 5.0 / letters[pass[i]];
                }
                // bonus points for mixing it up
                var variations = {
                    digits: /\d/.test(pass),
                    lower: /[a-z]/.test(pass),
                    upper: /[A-Z]/.test(pass),
                    nonWords: /\W/.test(pass),
                }
                variationCount = 0;
                for (var check in variations) {
                    variationCount += (variations[check] == true) ? 1 : 0;
                }
                score += (variationCount - 1) * 10;
                return parseInt(score);
            };
            function checkPassStrength(password) {
                var score = scorePassword(password);
                alert(score);
                if (score > 80)
                    return "strong";
                if (score > 60)
                    return "good";
                if (score >= 30)
                    return "weak";
                return "";
    
            };
        </script>
    
     <div>
                <table>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="bt_pass" Text="Change Password" Width="180px" OnClientClick="return pass_click()" CssClass="rounded" />
                        </td>
                    </tr>
                </table>
    
            </div>

    Output:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 21, 2017 6:44 AM

All replies

  • User-707554951 posted

    Hi wmec,

    You could try the code below:

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
        <script>
                function pass_click() {
                    $.confirm({
                        title: 'Confirm Password',
                        content: '' +
                        '<form action="" class="formName">' +
                        '<div class="form-group">' +
                        '<label>Enter Password</label>:' +
                        '<input type="password" placeholder="Your Password" class="name form-control" required"/>' +
                        '<br/><label>Re-Confirm Password</label>:' +
                        '<input type="password" placeholder="Your Password" class="newname form-control" required />' +
                        '<br/><input type="label" class="status form-control" align="center" readonly="readonly" />' +
                       '</div>' +
                        '</form>',
                        buttons: {
                            formSubmit: {
                                text: 'Submit',
                                btnClass: 'btn-blue',
                                action: function () {
                                    var name = this.$content.find('.name').val();                            
                                    var newname = this.$content.find('.newname').val();
                                    var status = this.$content.find('.status');
                                 
                                    if (name == "") {
                                        $.alert("Invalid password and please enter one valid password!");
                                        return false;
                                    }
                                    if (name == newname) {
                                        status.val(checkPassStrength(name));                               
                                        $.alert('Valid Password is entered!');
                                    }
                                    else {
                                        $.alert("Invalid ConFirm Password is entered!");
                                        return false;
                                    }
                                }
                            },
                            cancel: function () {
                                //close
                            },
                        },
                        onContentReady: function () {
                            // bind to events
                            var jc = this;                      
                            this.$content.find('form').on('submit', function (e) {
                                // if the user submits the form by pressing enter in the field.
                                e.preventDefault();
                                jc.$$formSubmit.trigger('click'); // reference the button and click it
                            });
                        }
    
                    });
                    return false;
                };
               
                function scorePassword(pass) {
                    var score = 0;
                    if (!pass)
                        return score;
    
                    // award every unique letter until 5 repetitions
                    var letters = new Object();
                    for (var i = 0; i < pass.length; i++) {
                        letters[pass[i]] = (letters[pass[i]] || 0) + 1;
                        score += 5.0 / letters[pass[i]];
                    }
    
                    // bonus points for mixing it up
                    var variations = {
                        digits: /\d/.test(pass),
                        lower: /[a-z]/.test(pass),
                        upper: /[A-Z]/.test(pass),
                        nonWords: /\W/.test(pass),
                    }
    
                    variationCount = 0;
                    for (var check in variations) {
                        variationCount += (variations[check] == true) ? 1 : 0;
                    }
                    score += (variationCount - 1) * 10;
                    alert(score);
                    return parseInt(score);
                };
                function checkPassStrength(password) {
                    var score = scorePassword(password);
                    alert(score);
                    if (score > 80)
                        return "strong";
                    if (score > 60)
                        return "good";
                    if (score >= 30)
                        return "weak";
                    return "";
                };   </script>
    
     <form id="form1" runat="server">
            <div>
                <table>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="bt_pass" Text="Change Password" Width="180px" OnClientClick="return pass_click()" CssClass="rounded" />
                        </td>
                    </tr>
                </table>
              
            </div>
        </form>

    Best regards

    Cathy

    Monday, November 13, 2017 9:21 AM
  • User364663285 posted

    Sorry to that, I cannot see relevant response (of the strength) to the field (when adjusting the password) below
    http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc23&readonly=n

    Wednesday, November 15, 2017 3:59 AM
  • User-707554951 posted

    Hi wmec

    Use the following code:

     function pass_click() {
                $.confirm({
                    title: 'Confirm Password',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Enter Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="name form-control" required />' +
                    '<br/><label>Re-Confirm Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="newname form-control" required />' +
                    '<br/><input type="label" class="status form-control" align="center" readonly="readonly" />' +
                   '</div>' +
                    '</form>',
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var newname = this.$content.find('.newname').val();
                                var status = this.$content.find('.status');
                                if (name == "") {
                                    $.alert("Invalid password and please enter one valid password!");
                                    return false;
                                }
    
                                if (name == newname) {
                                    status.val(scorePassword(name));
                                    $.alert('Valid Password is entered!');
                                }
                                else {
                                    $.alert("Invalid Password is entered!");
                                    return false;
                                }
                            }
                        },
                        cancel: function () {
                            //close
                        },
                    },
                    onContentReady: function () {
                        // bind to events
                        var jc = this;
                        this.$content.find('form').on('submit', function (e) {
                            // if the user submits the form by pressing enter in the field.
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click'); // reference the button and click it
                        });
                    }
    
                });
                return false;
            };
            function scorePassword(pass) {
                var score = 0;
                if (!pass)
                    return score;
    
                // award every unique letter until 5 repetitions
                var letters = new Object();
                for (var i = 0; i < pass.length; i++) {
                    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
                    score += 5.0 / letters[pass[i]];
                }
    
                // bonus points for mixing it up
                var variations = {
                    digits: /\d/.test(pass),
                    lower: /[a-z]/.test(pass),
                    upper: /[A-Z]/.test(pass),
                    nonWords: /\W/.test(pass),
                }
    
                variationCount = 0;
                for (var check in variations) {
                    variationCount += (variations[check] == true) ? 1 : 0;
                }
                score += (variationCount - 1) * 10;
                alert(score);
                return parseInt(score);
            };
            function checkPassStrength(password) {
                var score = scorePassword(password);
                alert(score);
                if (score > 80)
                    return "strong";
                if (score > 60)
                    return "good";
                if (score >= 30)
                    return "weak";
                return "";
            };
        </script>

    Output:

    Best regards

    Cathy

    Thursday, November 16, 2017 2:00 AM
  • User364663285 posted

    Hi,
    Please see below, as I want to

    1 Show relevant password strength to the highlighted field
    2 How to remove frame of the field highlighted?

    https://app.box.com/s/s59n9mn3w84ryol43v9vic74zergu4a1

    Thursday, November 16, 2017 8:28 AM
  • User-707554951 posted

    Hi wmec,

    Something as below:

     function pass_click() {
                $.confirm({
                    title: 'Confirm Password',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Enter Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="name form-control" required id="test" />' +
                    '<br/><label>Re-Confirm Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="newname form-control" required />' +
                    '<br/><input id="Text1" type="text"  value=""  class="status form-control" align="center" />' +
                   '</div>' +
                    '</form>',       
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var newname = this.$content.find('.newname').val();            
                                if (name == "") {
                                    $.alert("Invalid password and please enter one valid password!");
                                    return false;
                                }
    
                                if (name == newname) {                       
                                    $.alert('Valid Password is entered!');
                                }
                                else {
                                    $.alert("Invalid Password is entered!");
                                    return false;
                                }
                            }
                        },
                        cancel: function () {
                            //close
                        },
                    },
                    onContentReady: function () {
                        // bind to events
                        var jc = this;
                        this.$content.find('#test').change(function () {
                            var score=scorePassword($(this).val())
                            $(this).next().next().next().next().next().val(score);
                     
                        });
                     
                        this.$content.find('form').on('submit', function (e) {
                            // if the user submits the form by pressing enter in the field.
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click'); // reference the button and click it
                        });
                    }
    
                });
                return false;
            };
            function scorePassword(pass) {
                var score = 0;
                if (!pass)
                    return score;
    
                // award every unique letter until 5 repetitions
                var letters = new Object();
                for (var i = 0; i < pass.length; i++) {
                    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
                    score += 5.0 / letters[pass[i]];
                }
    
                // bonus points for mixing it up
                var variations = {
                    digits: /\d/.test(pass),
                    lower: /[a-z]/.test(pass),
                    upper: /[A-Z]/.test(pass),
                    nonWords: /\W/.test(pass),
                }
                variationCount = 0;
                for (var check in variations) {
                    variationCount += (variations[check] == true) ? 1 : 0;
                }
                score += (variationCount - 1) * 10;
                return parseInt(score);
            };
            function checkPassStrength(password) {
                var score = scorePassword(password);
                alert(score);
                if (score > 80)
                    return "strong";
                if (score > 60)
                    return "good";
                if (score >= 30)
                    return "weak";
                return "";
            };
        </script>

    Best regards

    Cathy

    Thursday, November 16, 2017 10:43 AM
  • User364663285 posted

    Hi,

    After I've input both passwords below, how to ensure "strength number" would then be shown?

    https://app.box.com/s/7j2a4hi3w9g6ebyoiaaui0kiu4hrljme

    Friday, November 17, 2017 2:00 AM
  • User-707554951 posted

    Hi wmec,

    As you can see in the following picture, score number (85) display in statue label in a flash.

    https://s7.postimg.org/mhhhbrcij/abc.gif

    So, I suggest you could to add text change function to confirm password text box.

    Code as below:

      function pass_click() {
                $.confirm({
                    title: 'Confirm Password',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Enter Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="name form-control" required  />' +
                    '<br/><label>Re-Confirm Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="newname form-control" required  id="test"/>' +
                    '<br/><input id="Text1" type="text"  value=""  class="status form-control" align="center" />' +
                   '</div>' +
                    '</form>',       
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var newname = this.$content.find('.newname').val();            
                                if (name == "") {
                                    $.alert("Invalid password and please enter one valid password!");
                                    return false;
                                }
    
                                if (name == newname) {                       
                                    $.alert('Valid Password is entered!');
                                }
                                else {
                                    $.alert("Invalid Password is entered!");
                                    return false;
                                }
                            }
                        },
                        cancel: function () {
                            //close
                        },
                    },
                    onContentReady: function () {
                        // bind to events
                        var jc = this;
                        this.$content.find('#test').change(function () {
                            var score = scorePassword($(this).prev().prev().prev().val())
                            $(this).next().next().val(score);              
                        });
                     
                        this.$content.find('form').on('submit', function (e) {
                            // if the user submits the form by pressing enter in the field.
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click'); // reference the button and click it
                        });
                    }
    
                });
                return false;
            };
            function scorePassword(pass) {
                var score = 0;
                if (!pass)
                    return score;
    
                // award every unique letter until 5 repetitions
                var letters = new Object();
                for (var i = 0; i < pass.length; i++) {
                    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
                    score += 5.0 / letters[pass[i]];
                }
    
                // bonus points for mixing it up
                var variations = {
                    digits: /\d/.test(pass),
                    lower: /[a-z]/.test(pass),
                    upper: /[A-Z]/.test(pass),
                    nonWords: /\W/.test(pass),
                }
                variationCount = 0;
                for (var check in variations) {
                    variationCount += (variations[check] == true) ? 1 : 0;
                }
                score += (variationCount - 1) * 10;
                return parseInt(score);
            };
            function checkPassStrength(password) {
                var score = scorePassword(password);
                alert(score);
                if (score > 80)
                    return "strong";
                if (score > 60)
                    return "good";
                if (score >= 30)
                    return "weak";
                return "";
            };
        </script>

    Output:

    Best regards

    Cathy

    Friday, November 17, 2017 2:28 AM
  • User364663285 posted

    Sorry, can the strength index be immediately shown on the label (below 2nd password), once 2nd password has been input (before pressing Submit)?

    Friday, November 17, 2017 2:43 AM
  • User-707554951 posted

    Hi wmec,

    In my previous reply, strength number be immediately shown on the label (below 2nd password), once 2nd password has been input.

    Please check gif picture and underline  code carefully.

    If you still have problem, please feel free to let me again.

    Best regards

    Cathy

    Friday, November 17, 2017 2:58 AM
  • User364663285 posted

    I'm having the same codes (like you) but now the strength index is shown when Submit is pressed. What to adjust?

    (I expect index to be shown ONCE BOTH PASSWORDS HAVE BEEN INPUT!)

    Such codes

            buttons: {

                formSubmit: {

                    text: 'Submit',

                    btnClass: 'btn-blue',

                    action: function () {

                        var name = this.$content.find('.name').val();

                        var newname = this.$content.find('.newname').val();

                        var status = this.$content.find('.status');

                        if (name == "") {

                            $.alert("Invalid password and please enter one valid password!");

                            return false;

                        }

                        if (name == newname) {

                            status.val(scorePassword(name));

                            $.alert('Valid Password is entered!');

    would be triggered ONLY when button has been pressed, right?

    Friday, November 17, 2017 3:42 AM
  • User-707554951 posted

    Hi wmec,

    would be triggered ONLY when button has been pressed, right?

    Yes,  strength index is shown when Submit is pressed if use your code.

    (I expect index to be shown ONCE BOTH PASSWORDS HAVE BEEN INPUT!)

    Noticed the underline code in my previous reply.

    Please check first, it's what you want.

    Best regards

    Cathy

    Friday, November 17, 2017 5:16 AM
  • User364663285 posted

    Sorry, which reply (what time is it) of you?

    I'm now having the same code like your current codes but the index is shown after having pressed button.

    Friday, November 17, 2017 6:18 AM
  • User-707554951 posted

    Hi wmec

    Code as below:

    function pass_click() {
                $.confirm({
                    title: 'Confirm Password',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Enter Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="name form-control" required  />' +
                    '<br/><label>Re-Confirm Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="newname form-control" required  id="test"/>' +
                    '<br/><input id="Text1" type="text"  value=""  class="status form-control" align="center" />' +
                   '</div>' +
                    '</form>',       
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var newname = this.$content.find('.newname').val();            
                                if (name == "") {
                                    $.alert("Invalid password and please enter one valid password!");
                                    return false;
                                }
    
                                if (name == newname) {                       
                                    $.alert('Valid Password is entered!');
                                }
                                else {
                                    $.alert("Invalid Password is entered!");
                                    return false;
                                }
                            }
                        },
                        cancel: function () {
                            //close
                        },
                    },
                    onContentReady: function () {
                        // bind to events
                        var jc = this;
                        this.$content.find('#test').change(function () {
                            var score = scorePassword($(this).prev().prev().prev().val())
                            $(this).next().next().val(score);              
                        });
                     
                        this.$content.find('form').on('submit', function (e) {
                            // if the user submits the form by pressing enter in the field.
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click'); // reference the button and click it
                        });
                    }
    
                });
                return false;
            };
            function scorePassword(pass) {
                var score = 0;
                if (!pass)
                    return score;
    
                // award every unique letter until 5 repetitions
                var letters = new Object();
                for (var i = 0; i < pass.length; i++) {
                    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
                    score += 5.0 / letters[pass[i]];
                }
    
                // bonus points for mixing it up
                var variations = {
                    digits: /\d/.test(pass),
                    lower: /[a-z]/.test(pass),
                    upper: /[A-Z]/.test(pass),
                    nonWords: /\W/.test(pass),
                }
                variationCount = 0;
                for (var check in variations) {
                    variationCount += (variations[check] == true) ? 1 : 0;
                }
                score += (variationCount - 1) * 10;
                return parseInt(score);
            };
            function checkPassStrength(password) {
                var score = scorePassword(password);
                alert(score);
                if (score > 80)
                    return "strong";
                if (score > 60)
                    return "good";
                if (score >= 30)
                    return "weak";
                return "";
            };
        </script>

    Output:

    <sub></sub><sup></sup>

    Best regards

    Cathy

    Friday, November 17, 2017 6:22 AM
  • User364663285 posted

    Sorry, I have such codes

            onContentReady: function () {

                // bind to events

                var jc = this;

                this.$content.find('#test').change(function () {

                    var score = scorePassword($(this).prev().prev().prev().val())

                    $(this).next().next().val(score);

                });

                this.$content.find('form').on('submit', function (e) {

                    // if the user submits the form by pressing enter in the field.

                    e.preventDefault();

                    jc.$$formSubmit.trigger('click'); // reference the button and click it

                });

            }

    but after re-deployment, I cannot show the index to THAT label.

    Friday, November 17, 2017 7:18 AM
  • User-707554951 posted

    Hi wmec

     function pass_click() {
                $.confirm({
                    title: 'Confirm Password',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Enter Password</label>:' +
                    '<input type="password" placeholder="Your Password" class="name form-control" required  />' +
                    '<br/><label>Re-Confirm Password</label>:' +
     1.add id to input     '<input type="password" placeholder="Your Password" class="newname form-control" required  id="test"/>' +
                    '<br/><input id="Text1" type="text"  value=""  class="status form-control" align="center" />' +
                   '</div>' +
                    '</form>',       
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var newname = this.$content.find('.newname').val();            
                                if (name == "") {
                                    $.alert("Invalid password and please enter one valid password!");
                                    return false;
                                }
    
                                if (name == newname) {                       
                                    $.alert('Valid Password is entered!');
                                }
                                else {
                                    $.alert("Invalid Password is entered!");
                                    return false;
                                }
                            }
                        },
                        cancel: function () {
                            //close
                        },
                    },
                    onContentReady: function () {
                        // bind to events
                        var jc = this;
                        this.$content.find('#test').change(function () {
                            alert("1");
                            var score = scorePassword($(this).prev().prev().prev().val())
                            alert(score);
                            $(this).next().next().val(score);              
                        });
                     
                        this.$content.find('form').on('submit', function (e) {
                            // if the user submits the form by pressing enter in the field.
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click'); // reference the button and click it
                        });
                    }
    
                });
                return false;
            };
        

    May be you should do a little  changes based on my logic in the following code.<sub></sub><sup></sup>

    Debug your code by alerting  data.

    Use all code in my previous working sample to test.

    Best regards 

    Cathy

    Friday, November 17, 2017 7:33 AM
  • User364663285 posted

    Sorry to that prompt index cannot be shown, while I have the same codes like you. What is the problem?

    Monday, November 20, 2017 3:17 AM
  • User-707554951 posted

    Hi wmec, 

    please show me the code yo used now.

    Best regards

    Cathy

    Monday, November 20, 2017 7:33 AM
  • User364663285 posted

    Hi,

    FYI

    function pass_click() {

        $.confirm({

            title: 'Confirm Password',

            content: '' +

            '<form action="" class="formName">' +

            '<div class="form-group">' +

            '<label>Enter Password</label>:' +

            '<input id="pass1" type="password" placeholder="Your Password" class="name form-control" required />' +

            '<br/><label>Re-Confirm Password</label>:' +

            '<input id="pass2" type="password" placeholder="Your Password" class="newname form-control" required />' +

            '<br/><input type="label" class="status form-control" align="center" readonly="readonly" />' +

           '</div>' +

            '</form>',

            buttons: {

                formSubmit: {

                    text: 'Submit',

                    btnClass: 'btn-blue',

                    action: function () {

                        var name = this.$content.find('.name').val();

                        var newname = this.$content.find('.newname').val();

                        var status = this.$content.find('.status');

                        if (name == "") {

                            $.alert("Invalid password and please enter one valid password!");

                            return false;

                        }

                        if (name == newname) {

                            status.val(scorePassword(name));

                            $.alert('Valid Password is entered!');

                        }

                        else {

                            $.alert("Invalid Password is entered!");

                            return false;

                        }

                    }

                },

                cancel: function () {

                    //close

                },

            },

            onContentReady: function () {

                // bind to events

                var jc = this;

                this.$content.find('#test').change(function () {

                    alert("1");

                    var score = scorePassword($(this).prev().prev().prev().val())

                    alert(score);

                    $(this).next().next().val(score);

                });

                this.$content.find('form').on('submit', function (e) {

                    // if the user submits the form by pressing enter in the field.

                    e.preventDefault();

                    jc.$$formSubmit.trigger('click'); // reference the button and click it

                });

            }

        });

        return false;

    };

    function scorePassword(pass) {

        var score = 0;

        if (!pass)

            return score;

        // award every unique letter until 5 repetitions

        var letters = new Object();

        for (var i = 0; i < pass.length; i++) {

            letters[pass[i]] = (letters[pass[i]] || 0) + 1;

            score += 5.0 / letters[pass[i]];

        }

        // bonus points for mixing it up

        var variations = {

            digits: /\d/.test(pass),

            lower: /[a-z]/.test(pass),

            upper: /[A-Z]/.test(pass),

            nonWords: /\W/.test(pass),

        }

        variationCount = 0;

        for (var check in variations) {

            variationCount += (variations[check] == true) ? 1 : 0;

        }

        score += (variationCount - 1) * 10;

        alert(score);

        return parseInt(score);

    };

    function checkPassStrength(password) {

        var score = scorePassword(password);

        alert(score);

        if (score > 80)

            return "strong";

        if (score > 60)

            return "good";

        if (score >= 30)

            return "weak";

        return "";

    };

    Monday, November 20, 2017 1:05 PM
  • User-707554951 posted

    Hi micah2012

    Use the following code:

      function pass_click() {
                $.confirm({
                    title: 'Confirm Password',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Enter Password</label>:' +
                    '<input id="pass1" type="password" placeholder="Your Password" class="name form-control" required />' +
                    '<br/><label>Re-Confirm Password</label>:' +
                    '<input id="pass2" type="password" placeholder="Your Password" class="newname form-control" required />' +
                    '<br/><input type="label" class="status form-control" align="center" readonly="readonly" />' +
                   '</div>' +
                    '</form>',
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                           btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var newname = this.$content.find('.newname').val();
                                var status = this.$content.find('.status');
                                if (name == "") {
                                    $.alert("Invalid password and please enter one valid password!");
                                    return false;
                                }
                                if (name == newname) {
                                   // status.val(scorePassword(name));
                                    $.alert('Valid Password is entered!');
                                }
                                else {
                                    $.alert("Invalid Password is entered!");
                                    return false;
                                }
                            }
                        },
                       cancel: function () {
                            //close
                        },
                    },
    
                    onContentReady: function () {
                        // bind to events
                        var jc = this;
                        this.$content.find('#pass2').change(function () {
                            //alert("1");
                            var score = scorePassword($(this).prev().prev().prev().val())
                           // alert(score);
                            $(this).next().next().val(score);
                        });
    
                        this.$content.find('form').on('submit', function (e) {
                            // if the user submits the form by pressing enter in the field.
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click'); // reference the button and click it
                        });
                    }
                });
                return false;
            };
            function scorePassword(pass) {
                var score = 0;
                if (!pass)
                    return score;
                // award every unique letter until 5 repetitions
                var letters = new Object();
                for (var i = 0; i < pass.length; i++) {
                    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
                    score += 5.0 / letters[pass[i]];
                }
                // bonus points for mixing it up
                var variations = {
                    digits: /\d/.test(pass),
                    lower: /[a-z]/.test(pass),
                    upper: /[A-Z]/.test(pass),
                    nonWords: /\W/.test(pass),
                }
                variationCount = 0;
                for (var check in variations) {
                    variationCount += (variations[check] == true) ? 1 : 0;
                }
                score += (variationCount - 1) * 10;
                alert(score);
                return parseInt(score);
            };
            function checkPassStrength(password) {
                var score = scorePassword(password);
                alert(score);
                if (score > 80)
                    return "strong";
                if (score > 60)
                    return "good";
                if (score >= 30)
                   return "weak";
                return "";
    
            };

    Best regards

    Cathy

    Tuesday, November 21, 2017 1:35 AM
  • User364663285 posted

    Many thanks. 

    One last thing, I want to disable this prompt below. HOw?

    https://app.box.com/s/iurt8om9fi9vxyogrq89c4ebpm0xm1lw

    Tuesday, November 21, 2017 2:36 AM
  • User-707554951 posted

    Hi wmec

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" />
        <script>
            function pass_click() {        
                $.confirm({
                    title: 'Confirm Password',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Enter Password</label>:' +
                    '<input id="pass1" type="password" placeholder="Your Password" class="name form-control" required />' +
                    '<br/><label>Re-Confirm Password</label>:' +
                    '<input id="pass2" type="password" placeholder="Your Password" class="newname form-control" required />' +
                    '<br/><input type="label" class="status form-control" align="center" readonly="readonly" />' +
                   '</div><div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><div class="modal-content" style="width:390px"><div class="modal-header" style="width:390px"><button type="button" class="close" data-dismiss="modal">&times;</button><h5 class="modal-title">my-friend.co says</h5></div><div class="modal-body"><p>Some text in the modal.</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">OK</button></div></div></div></div>' +
                    '</form>',
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var newname = this.$content.find('.newname').val();
                                var status = this.$content.find('.status');
                                if (name == "") {
                                    $.alert("Invalid password and please enter one valid password!");
                                    return false;
                                }
                                if (name == newname) {
                                    // status.val(scorePassword(name));
                                    $.alert('Valid Password is entered!');
                                }
                                else {
                                    $.alert("Invalid Password is entered!");
                                    return false;
                                }
                            }
                        },
                        cancel: function () {
                            //close
                        },
                    },
    
                    onContentReady: function () {
                        // bind to events
                        var jc = this;
                        this.$content.find('#pass2').change(function () {
                            //alert("1");
                            var score = scorePassword($(this).prev().prev().prev().val())
                            $(this).next().next().val(score);
                            $(this).parent().next().find("p").html(score);
                            $(this).parent().next().modal("show");
                        });
    
                        this.$content.find('form').on('submit', function (e) {
                            // if the user submits the form by pressing enter in the field.
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click'); // reference the button and click it
                        });
                    }
                });
                return false;
            };
            function scorePassword(pass) {
                var score = 0;
                if (!pass)
                    return score;
                // award every unique letter until 5 repetitions
                var letters = new Object();
                for (var i = 0; i < pass.length; i++) {
                    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
                    score += 5.0 / letters[pass[i]];
                }
                // bonus points for mixing it up
                var variations = {
                    digits: /\d/.test(pass),
                    lower: /[a-z]/.test(pass),
                    upper: /[A-Z]/.test(pass),
                    nonWords: /\W/.test(pass),
                }
                variationCount = 0;
                for (var check in variations) {
                    variationCount += (variations[check] == true) ? 1 : 0;
                }
                score += (variationCount - 1) * 10;
                return parseInt(score);
            };
            function checkPassStrength(password) {
                var score = scorePassword(password);
                alert(score);
                if (score > 80)
                    return "strong";
                if (score > 60)
                    return "good";
                if (score >= 30)
                    return "weak";
                return "";
    
            };
        </script>
    
     <div>
                <table>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="bt_pass" Text="Change Password" Width="180px" OnClientClick="return pass_click()" CssClass="rounded" />
                        </td>
                    </tr>
                </table>
    
            </div>

    Output:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 21, 2017 6:44 AM