<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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
would be triggered ONLY when button has been pressed, right?
Yes, strength index is shown when Submit is pressed if use your code.
wmec
(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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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.
Debug your code by alerting data.
Use all code in my previous working sample to test.
Best regards
Cathy
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
<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">×</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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Show the strength
Nov 10, 2017 11:09 PM|wmec|LINK
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?
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 13, 2017 09:21 AM|Cathy Zou|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 15, 2017 03:59 AM|wmec|LINK
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
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 16, 2017 02:00 AM|Cathy Zou|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 16, 2017 08:28 AM|wmec|LINK
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
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 16, 2017 10:43 AM|Cathy Zou|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 17, 2017 02:00 AM|wmec|LINK
Hi,
After I've input both passwords below, how to ensure "strength number" would then be shown?
https://app.box.com/s/7j2a4hi3w9g6ebyoiaaui0kiu4hrljme
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 17, 2017 02:28 AM|Cathy Zou|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 17, 2017 02:43 AM|wmec|LINK
Sorry, can the strength index be immediately shown on the label (below 2nd password), once 2nd password has been input (before pressing Submit)?
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 17, 2017 02:58 AM|Cathy Zou|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 17, 2017 03:42 AM|wmec|LINK
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?
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 17, 2017 05:16 AM|Cathy Zou|LINK
Hi wmec,
Yes, strength index is shown when Submit is pressed if use your code.
Noticed the underline code in my previous reply.
Please check first, it's what you want.
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 17, 2017 06:18 AM|wmec|LINK
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.
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 17, 2017 06:22 AM|Cathy Zou|LINK
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:
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 17, 2017 07:18 AM|wmec|LINK
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.
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 17, 2017 07:33 AM|Cathy Zou|LINK
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.
Debug your code by alerting data.
Use all code in my previous working sample to test.
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 20, 2017 03:17 AM|wmec|LINK
Sorry to that prompt index cannot be shown, while I have the same codes like you. What is the problem?
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 20, 2017 07:33 AM|Cathy Zou|LINK
Hi wmec,
please show me the code yo used now.
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 20, 2017 01:05 PM|wmec|LINK
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 "";
};
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 21, 2017 01:35 AM|Cathy Zou|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6467 Points
5804 Posts
Re: Show the strength
Nov 21, 2017 02:36 AM|wmec|LINK
Many thanks.
One last thing, I want to disable this prompt below. HOw?
https://app.box.com/s/iurt8om9fi9vxyogrq89c4ebpm0xm1lw
Peter
Star
8670 Points
2882 Posts
Re: Show the strength
Nov 21, 2017 06:44 AM|Cathy Zou|LINK
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">×</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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.