Check if password has at least 1 capital letter

JavaScript
1

I currently have some basic but working validation on a password field as below, but what I’m sure is how to check if the password contains at least 1 capital letter and at least 1 number.

This is where i am

var oldpassword = $("input[name=\"old_password\"]").val();    
var newpassword = $("input[name=\"new_password\"]").val();
var confirmpassword = $("input[name=\"confirm_password\"]").val();

if (newpassword === '' || confirmpassword === '' || oldpassword === ''){ 
document.getElementById('buttonSubmit').style.display = 'block';
swal({
title: 'Error!',
text: 'You need to fill in all the fields',
type: 'error',
confirmButtonText: 'Return'
} )
}

I only need it on the new password bit, as the confirm password needs to match that anyway, but using the style above, just need to validate those needs.

2

A regex in the pattern attribute will do it.
http://html5pattern.com/Passwords

1 Like
4

OK I see, didnt know about the pattern atribute, but have added below.

So how do I then check it

<label for="form1_name">Enter New Password</label>
<input id="form1_name" type="password" name="new_password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" value=""/>
5

Simply put it into the pattern attribute of the input and let the browser take care of it.

6

Ye thats what I though, but I have some validation working so I thin it over writes it.

<script>
function serviceCall() {	
document.getElementById('buttonSubmit').style.display = 'none';

var oldpassword = $("input[name=\"old_password\"]").val();
var newpassword = $("input[name=\"new_password\"]").val();
var confirmpassword = $("input[name=\"confirm_password\"]").val();
7

Have you tested it?
If it all needs to be JS you could probably re-use the same regex in your script.

8

It would be helpful if you posted your entire form and script. As right now it is hard to see what your serviceCall function is doing and how it is being invoked.

9 
<form name="form1" id="signupForm" method="post" id="myForm">
<label for="form1_name">Enter Old Password</label>
<input id="form1_name" type="password" name="old_password" value=""/><br/><br/>
<label for="form1_name">Enter New Password</label>
<input id="form1_name" type="password" name="new_password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" value=""/><br/><br/>
<label for="form1_name">Confirm New Password</label>
<input id="form1_cpassword" type="password" name="confirm_password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" value=""/>
<p>(Your new password must contain between 6 and 50 characters, at least 1 upper case letter, and at least 1 number)  </p>
<div id="buttonSubmit" onclick="serviceCall();">SUBMIT</div></div>
</form>

<script>
function serviceCall() {	
document.getElementById('buttonSubmit').style.display = 'none';

var oldpassword = $("input[name=\"old_password\"]").val();
var newpassword = $("input[name=\"new_password\"]").val();
var confirmpassword = $("input[name=\"confirm_password\"]").val();

if (newpassword === '' || confirmpassword === '' || oldpassword === ''){ 
document.getElementById('buttonSubmit').style.display = 'block';
swal({
title: 'Error!',
text: 'You need to fill in all the fields',
type: 'error',
confirmButtonText: 'Return'
} )
} 
else if (newpassword != confirmpassword){ 
document.getElementById('buttonSubmit').style.display = 'block';
swal({
title: 'Error!',
text: 'It seems like you have typed your old password incorrectly',
type: 'error',
confirmButtonText: 'Return'
} )
}
else {
$.ajax(
{
crossDomain: true,
contentType: "application/json; charset=utf-8",
url: "http://dev.mysite.com/WebService.asmx/TC_ChangePassword",
data: {id: "", user_ID: "<?php echo $userID ?>", newPassword: newpassword, currentPassword: oldpassword},
dataType: "jsonp",
success: onDataReceived
});

Thats pretty much the most of it, it does continue down but thats just to show an error if something gos wrong

10

[off-topic]
Your form element has two IDs and no action.

11

Ye the one is an id for css, should change it really, the button that calls the action is on the div at the bottom of the form

<div id="buttonSubmit" onclick="serviceCall();">SUBMIT</div>
12

An element can’t have multiple IDs, it’s not valid and may confuse the script/css.
Use a class for the css.

1 Like
13

will do, was just doing it :thumbsup:

14

Also, based on the way you are handling your form, you will have to use that regex in your JavaScript and not as a pattern on the field.

The reason is, you are not letting the form submit the data, you are using JavaScript to do it via an ajax call, thus the form will have little say over the matter.

You will want to read

1 Like
15

Ah, and there was me trying something along this line

newpassword.each(function () {
if(!^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$.test(this.value))
swal({
title: 'Error!',
text: 'You need bla bla',
type: 'error',
confirmButtonText: 'Return'
} )
   });
16

I may sound like a broken record, but what if the visitor has JS switched off?

17

Hi gandalf458, ye I know, I have discussed it with the team leader and its not their concern they said, so am carrying on until they realise it is a concern.

Started with this now

newpassword = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/.test(newpassword);

Seems to be right, but its how I now give the user the error message through swal as I have with the others

18

You are close

var is_correct_format = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/.test(newpassword);

Then use

if (!is_correct_format) {
 // error to user
}
1 Like
19

Thanks all, another thing learned today.

Cheers

20

Just one more thing cpradio, what would it be to check if the password has between 6 and 50 characters

21

newpassword.length >= 6 && newpassword.length <= 50