How allow input length 0 and >= 6 - html

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)

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>

How do I set a min & max length for a password on HTML

This is probably a really simple fix so hoping someone can help!
I have been tasked with setting password parameters where people are asked to have there password between 5-10 characters.
I am able to bring up the error message so that it asks for more characters than 5 but not the one that asks for it to be between 5-10.
I can set the maximum characters to 10 but that just put a block on how many characters you can have in the field rather than ask people for the specific rules that I am looking for.
Any help will be massively appreciated!
This code will set the min length
This one I was sure would work but restricted what I could put in the box instead of setting certain rules
Thanky you so much in advance!!!
In HTML5 we can use :
<input type="password" pattern=".{5,10}" required>
You can use the minlength option inside the input like so:
<input type="password" id="pass" name="password"
minlength="8" required>
Same with maxlength:
<input type="password" id="pass" name="password"
maxlength="8" required>

HTML5 form Pattern match validation for input of 1 to 3 digit number

How do I pattern match validation for input of 1 to 3 digit number. I tried below and it does not work
<input type="text" title="FOO should be a 3 Digit Number Only" pattern="[\d]{3}" id="uid" name="foo<?php echo $i+1;?>" placeholder="Enter FOO" placeholder="FOO" required="'required'" minlength="1" maxlength="3" />
You are looking for a RegEx: /^\d{1,3}$/ or ^0*\d{1,3}$ to allow numbers starting with any amout of 0s.
<input type="text" pattern="^\d{1,3}$" />
^ makes sure the string starts with that pattern, and $ makes sure that it ends with that pattern
You can try your RegEx on websites like https://regex101.com or http://regexr.com
Try to use this pattern:
pattern="^\d{1,3}$"
The other way is to use maxlength property like
<input type="text" maxlength="3" />
This will make sure that you can have maximum 3 digit number in your textbox.

Why does my Foundation Abide pattern not work?

I have the following HTML for making sure password length is over 8 characters:
<label>Password <small>required</small>
<input type="password" name="password" id="password" required pattern=".{8,}">
</label>
<small class="error">Your password must be at least 8 characters long.</small>
This works. However, if in a different field I use the pattern [a-zA-Z]+, like this:
<label>Username <small>required</small>
<input type="text" name="username" required pattern="[a-zA-Z0-9]+">
</label>
<small class="error">Username must consist out of letters or numbers only.</small>
It will allow everything. If I change the pattern in the username field to .{8,}, it will only allow inputs that are over 8 characters in length, as expected. Why does the pattern for the username field not work?
The documentation states that this is the correct way to do it:
<label>Your name <small>required</small>
<input type="text" required pattern="[a-zA-Z]+">
</label>
<small class="error">Name is required and must be a string.</small>
The fix is to wrap the pattern in line begin and end characters, like such:
<input type="text" name="username" required pattern="^[a-zA-Z0-9]+$">
Maybe this is a bug in Foundation that needs to be reported on their Github?

removing char in string after space

I'm having problem with that java framework seems to remove the content of a string after a space character.
code example
<input type="text" name="txtName" size="25" value=<%=Name%>>
If Name is equal to "This is my name" the input text only show "This".
I'm guessing this is to avoid xss problems but I need to be able to use strings that contain space so how do I get around this? (i'm using tomcat)
You need to add quotes around the value of your value attribute.
This is always the case in HTML when attribute values contain spaces.
(ie it has nothing to do with Java)
It should look like this:
<input type="text" name="txtName" size="25" value="<%= Name %>">
This will do... value="<%=Name%>"
<input type="text" name="txtName" size="25" value="<%=Name%>">