Problem comparing two password input fields in html - html

Sometimes comparing two html password input fields fails.
I have two input fields in a website, with a pattern that has to be valid (at least: one upper- /lowercase char, one number and symbol)
In some cases the passwords are compared as correct/matching, in another example the password is said to be different, although i copy and pasted the same password into both fields.
Is there a problem with the pattern-regex?
Here is the code i use in a form with a button below:
<input id="password" name="pw" type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!##$%^&*_=+-]).{12,255}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'The password needs to have at least 12 characters and at least one: upper- and lower case letter, a number and one of the symbols: !##$%^&*_=+-' : ''); if(this.checkValidity()) form.pwconfirm.pattern = this.value;" placeholder=" Password" required>
<input id="pwconfirm" name="pwconfirm" type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!##$%^&*_=+-]).{12,255}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Password has to match' : '');" placeholder=" Verify Password" required>
This works with the pasword: !Te!st##$123_=+-45**%^&67ABC*
but not with the much simpler: Test007$##007
Thanks for you help.
I tried multiple passwords and RegExs to find a solution that always matches the password fields as valid, when the RegEx is valid and both fields match.

Related

How to validate password from input field in HTML?

I have the task of using a password field which checks if it has at least 8 characters, consists of at least 1 uppercase character, 1 lowercase character and 1 digit. How can I do this in the HTML input field using the pattern attribute?
Thank you.
You can use pattern for validation.
<input type="password" id="pass" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
You can learn more here
However, if you ever wanted to use some javascript, then HTML5 does enable some validation, even pattern matching, but I'm pretty sure you'd need some javascript to have this working and also compare the two values with confirm password field as well.
You can try this
<input id="password" name="password" type="password" pattern="^\S{8,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 8 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>
<input id="password_two" name="password_two" type="password" pattern="^\S{8,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>

HTML password pattern

I am trying to make a simple password pattern. 1 uppercase letter, 4 lowercase letters, 1 number and 1 symbol.
However, the only code that i have been able to come up with looks like this:
<input type="password" id="password" name="password" pattern="[A-Z]{1}[a-z]{4}[0-9]{1}[!]{1}">
which is not what i want. this only allows the user to input the password in that order.
I would like to make it that the password can be in any order, but with the conditions I want.
Any ideas?

HTML5 password pattern validation

Below is the the requirement I have to apply to Login page.
To enter the password of the customer.
The text “Enter the password” should be displayed by default in the text box.
At present when the password is entered the text is visible. Make the necessary changes so that the text entered for password is masked.
Password can contain alphabets, numbers and underscore. It should contain a minimum of 8 and a maximum of 15 characters.
this is my code below
Password<input type="password" name="password" pattern="[a-zA-Z0-9_]{8,15}" placeholder="Enter the password" minlength=8 maxlength="15" autocomplete="off" required><br>
But when i execute it.it failed.and shows "Fail 1 - Check the HTML component 'input' field with the name 'password' and it must be used with correct pattern which is specified in the problem description."
what's wrong with my code?
Validation is correct for minimum 8 character and maximum 15 character.
i.e [a-zA-Z0-9_]{8,15}
Also, there is no need to write minlength=8 maxlength="15"

How allow input length 0 and >= 6

Currently I have built a password form like this.
<input id="password" name="password" type="password" minlength='6' ng-model="model.password"
placeholder="Password"
required/>
Here password length is more than 6.
But default users have no password and allow 0 length password.
I have no idea how to do this.
Must look like this(not using javascript)
<input id="password" name="password" type="password" length='0 || > 6' ng-model="model.password"
placeholder="Password"
/>
Is this even possible?
You want to use this:
<input id="password" name="password" type="password" ng-model="model.password" placeholder="Password" pattern="|.{6}.*" />
required enforces the field must be non-empty. Do not use it.
The number in the code means minimum lenght. See description.
Description:
Use a pattern attribute here. It defines a RegEx (regular expression) that describes the content. The check is done by browser. Check it also on server-side.
Example:
<input pattern="|......+" />
Pattern description:
| means "or" (Empty string (left side) or ......+ (right side))
. means any character (only one)
.+ means one or more characters.
Use more dots (.) to set longer string.
If you want to use number, use this:
<input pattern="|.{6}.*">
The number between { and } is length.
.{number} means a string with fixed length.
.* means a string (0 or more characters)

HTML form password requirements

I need to create a registration form in HTML which has a password input with the following constraints:
Is a mandatory field, should be validated. Minimum of 7 characters. Should have at least one special character and one number. Do not use java script, use HTML 5 features.
I have written the following code to for the above input:
<input type="text" name="password" pattern="(?=.*\d)(?=.*[\W_]).{7,}" required>
I need to submit this code as part of an assignment and I get the error:
Correct HTML Component with the name 'password' must be used with appropriate constraints
which means I am not using the correct attributs.
What changes should I make to the pattern attribute?
This code works perfectly with validation message
<p>Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[\W_]).{7,}" title="Minimum of 7 characters. Should have at least one special character and one number."></p>
try it here :
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern3
I think this will work.
Password:<input type="password" name="pw" pattern="^(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!#$%^&*-]).{7,}$" title="Minimum of 7 characters. Should have at least one special character and one number and one UpperCase Letter.">
Pattern attribute will also use a Regular Expression to validate your form-data.So for more results you can also search for Regular Expression