locked
Problem to jQuery event RRS feed

  • Question

  • User364663285 posted

    Hi,

    What is wrong below

    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/><label>Password Strength</label>:<input type="label" class="status form-control" 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 = checkPassStrength(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 "";

    };

    as I get 0 to Password strength in above?

    Tuesday, November 21, 2017 1:17 PM

Answers

  • User-335504541 posted

    Hi <g class="gr_ gr_23 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="23" data-gr-id="23">wmec</g>,

    I want to show how strong it is, to highlighted box below

    Do you want to display something like strong, good, weak according to the score?

    Please try to use the following code:

    <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
                <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/><label>Password Strength</label>:' +
                            '<input type="label" class="status form-control" 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 = checkPassStrength(scorePassword($(this).prev().prev().prev().val()));
                                    $(this).next().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 = (password);
                        if (score > 80)
                            return "strong";
                        if (score > 60)
                            return "good";
                        if (score >= 30)
                            return "weak";
                        return "very weak";
                    };
                </script>

    And the result is:

    Best Regards,

    Billy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 23, 2017 6:20 AM

All replies

  • User364663285 posted

    Hi,

    Any help?

    Wednesday, November 22, 2017 5:11 AM
  • User-335504541 posted

    Hi <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">wmec</g>,

    as I get 0 to Password strength in above?

    The reason is in your onContentReady, you already pass the score to the checkPassStrength().

    And in the checkPassStrength() you call the <g class="gr_ gr_218 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="218" data-gr-id="218">scorePassword</g>() again.

    So it will be 0.

    I think you could remove the <g id="280" data-gr-id="280" class="gr_ gr_280 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace">scorePassword</g>() in the checkPassStrength().

    For example:

                function checkPassStrength(password) {                   
                        var score = 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,

    Billy

    Wednesday, November 22, 2017 6:27 AM
  • User364663285 posted

    Using these

            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

                });

    it cannot show the score of password. What to adjust?

    Thursday, November 23, 2017 2:49 AM
  • User-335504541 posted

    Hi <g class="gr_ gr_85 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="85" data-gr-id="85">wmec</g>,

    Do you want to display the <g class="gr_ gr_81 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="81" data-gr-id="81">score into</g> the textbox?

    If so, please try to use the following code:

     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().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
                                });

    And the result is:

    Best Regards,

    Billy

    Thursday, November 23, 2017 4:39 AM
  • User364663285 posted

    I want to show how strong it is, to highlighted box below

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

    what to adjust below?

            onContentReady: function () {

                // bind to events

                var jc = this;

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

                    //alert("1");

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

                    $(this).next().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

                });

            }

    Thursday, November 23, 2017 5:12 AM
  • User-335504541 posted

    Hi <g class="gr_ gr_23 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="23" data-gr-id="23">wmec</g>,

    I want to show how strong it is, to highlighted box below

    Do you want to display something like strong, good, weak according to the score?

    Please try to use the following code:

    <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
                <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/><label>Password Strength</label>:' +
                            '<input type="label" class="status form-control" 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 = checkPassStrength(scorePassword($(this).prev().prev().prev().val()));
                                    $(this).next().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 = (password);
                        if (score > 80)
                            return "strong";
                        if (score > 60)
                            return "good";
                        if (score >= 30)
                            return "weak";
                        return "very weak";
                    };
                </script>

    And the result is:

    Best Regards,

    Billy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 23, 2017 6:20 AM
  • User364663285 posted

    Can I know if it is referring to previous field by "prev()"?

    Thursday, November 23, 2017 6:27 AM
  • User-335504541 posted

    Hi <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">wmec</g>,

    Can I know if it is referring to <g class="gr_ gr_17 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="17" data-gr-id="17">previous</g> field by "prev()"?

    You could use prev() to find the previous field. 

    For example, if you use the prev() to the textbox for Strength, you will the label for "Password Strength".

    Here it the reference:

    https://api.jquery.com/prev/

    https://www.w3schools.com/jquery/traversing_prev.asp

    Best Regards,

    Billy

    Thursday, November 23, 2017 6:43 AM
  • User364663285 posted

    Sorry, can you please advise what

    $(this).parent().next().find("p").html(score);

    is doing?

    Thursday, November 23, 2017 6:55 AM
  • User-335504541 posted

    Hi <g class="gr_ gr_9 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="9" data-gr-id="9">wmec</g>,

    Sorry, can you please advise what

    $(this).parent().next().find("p").html(score);

    is doing?

    It used to set the score text to the next pop up.

    Best Regards,

    Billy

    Thursday, November 23, 2017 7:16 AM
  • User364663285 posted

    How does it disable that Popup?

    Thursday, November 23, 2017 7:38 AM
  • User-335504541 posted

    Hi <g class="gr_ gr_13 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="13" data-gr-id="13">wmec</g>,

    How does it disable that Popup?

    Please try:

                    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/><label>Password Strength</label>:' +
                            '<input type="label" class="status form-control" 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 = checkPassStrength(scorePassword($(this).prev().prev().prev().val()));
                                    console.log($(this).parent());
                                    $(this).next().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;
                    };

    Best Regards,

    Billy

    Thursday, November 23, 2017 7:51 AM