Form Validation Becomes Invalid After One Letter - html

i have a contact form where I ask for ppls names. i tried to put some validation to make sure they only used letters "[A-Za-z]". if i type in 1 letter it goes to valid but then if i type any more letters it says invalid. is there something else i need to add to "[A-Za-z]"?
<div class="form-group">
<label class="col-xs-4 control-label" for="lname">Last Name</label>
<div class="col-xs-8">
<input id="lname" name="lname" type="text" placeholder="Your last name" data-trigger="manual" data-content="Can only contain letters!" class="name form-control" type="text" required pattern="[A-Za-z]">
</div>
</div>

The meaning of your pattern value is "only one character".
for using letters you can use pattern value as pattern="[A-Za-z]+". The meaning of + is 1 or more characters.

The attribute pattern="[A-Za-z]" means that the value must be a single letter. Add the + operator to allow repetition: pattern="[A-Za-z]+". The pattern attribute values have the same syntax as regular expressions in JavaScript.
On the other hand, you probably should not use pattern at all for a person’s name, unless you have a good reason to restrict them so that people are forced to enter their names as modified (e.g. omitting diacritic marks, omitting spaces, hyphens, and apostrophes, and transcribing characters that are not in the Latin alphabet).

Related

Pattern attribute not working as expected?

So I'm trying to make a form for my assignment, and I am using the pattern attribute in html so only certain characters are required to be typed on the text box. But for some reason, the form is saying using that I'm using an incorrect format even though I made my pattern attribute that way.
Here's an example of the code and a picture of the problem.
<form>
<label for="mnumber">Mobile Number:</label>
<input type="text" required id="mnumber" pattern="[0-9]"><br><br>
<input type="submit" value="submit">
</form>
You did write:
pattern="[0-9]"
You are asking for only one number. You just forget to add '+' to accept more than one number. I guess what you are searching for is this:
pattern="[0-9]+"
pattern="[0-9]"
allows for only a single number character to validate (and be submitted). If you want to allow more than one character, here's your options:
One or more numbers:
pattern="[0-9]+"
Zero or more numbers:
pattern="[0-9]*"
One to three numbers:
pattern="[0-9]{1,3}"
you just need to change type="text" to type="number"

How to fix pattern="[A-Za-z]" input field

Hey for some reason when i use this(pattern="[A-Za-z]") in my input field nothing will be accepted?
When I enter "Ruben" in this field it just says "make sure the format complies with the requested format"?
Thank you for your help
The pattern matches exactly one character. Add a + quantifier after the character class to make it match one or more of those characters.
The reason is that [A-Za-z] matches single character, Ruben is 5 hars long.
You should use [A-Za-z]+ for pattern instead, which will accept one or more of letters.
You could also use anchors ^[A-Za-z]+$ to make sure input consists of only letters.
<form>
<div>
<label for="uname">enter test string </label>
<input type="text" id="uname" name="name" required size="45"
pattern="^[a-zA-Z]+$" title="enter test string">
<span class="validity"></span>
<p>Input must be at least one letter and ocnsist of only letters.</p>
</div>
<div>
<button>Submit</button>
</div>
</form>

Regex to detect when certain characters or substrings

I'm currently using a regex to detect space, single-quote & double-quote in an input.
I would like to add the detection of several strings: ex. 'xxx' & 'yyy'. It should only detect for those complete strings, so 'x' or 'y' by itself wouldn't be detected.
Currently have this in html input code:
<input type="text" pattern="^(?=.*[\x27\x20\x22]).+$" ...
If you just want to ensure exactly one space, single-quote or double-quote appears in the input, you can simplify your pattern to:
<input type="text" pattern="[\x27\x20\x22]" ...
To detect other things, you can add "alternations", separated by |:
<input type="text" pattern="[\x27\x20\x22]|xxx|yyy" ...
As per jhnc: To detect any instance, no matter where in the string:
<input type="text" pattern=".*([\x27\x20\x22]|xxx|yyy).*" ...

How do i make a specific pattern for my html input

I'm trying to make a custom pattern for my html input but have no idea how to do so!
The pattern I want: ABC-A0-01
So basically the first part has uppercase alphabets only, second part has uppercase with numeric values, and the last part is numeric only and is separated by a '-'
<input type="text" class="form-control txtsize" id="equi" placeholder="Insert equipment name e.g ABC-A0-12" data-ng-model="equipmentToAdd">
You could use the pattern attribute with a RegEx such as this: pattern="[A-Z]{3}[-][A-Z]{1}[0-9]{1}[-][0-9]{2}".
Try inputting an invalid value, and hit submit. The browser will give an error with the message from title property.
<form>
<input type="text" class="form-control txtsize" id="equi" placeholder="Insert equipment name e.g ABC-A0-12" data-ng-model="equipmentToAdd" pattern="[A-Z]{3}[-][A-Z]{1}[0-9]{1}[-][0-9]{2}" title="Insert equipment name e.g ABC-A0-12">
<button type="submit">Submit</button>
</form>

Preventing leading white space in input field pattern

Problem
I'm trying to prevent leading whitespace from being used in an input whether through spaces or tabs by using a pattern, but I'm having issues with this regular expression ^(?!\s)([a-zA-Z0-9 _.'"()!?&#]){1,}$, which I think is because I might not be escaping properly because of the quotation marks?
Ultimately, I want to make sure the input takes at least one character, but none of those characters be leading white space at the beginning of the query.
Invalid inputs
_This is a query
__This is a query
Valid inputs
This is a good input
abc
123
a
index.html
<form action="{% url 'master_search' %}" method="GET">
<i class="fa fa-search search-icon-drilldown" aria-hidden="true"></i>
<input type="text" class="nav__search--agency form-control inline" name="q" value="" placeholder="Search by employee name" pattern="^(?!\s)([a-zA-Z0-9 _.'"()!?&#]){1,}$" required>
</form>
Hm. If you want to allow everything that starts with a letter or number,
pattern="^[a-zA-Z1-9].*"
should do the job
You could also negate a range by doing
^[^\s]+.*$
which will match a line with a starting character that is not white space.
This is A pattern , which is uses to input type in html, but for name validation I have been analysise the pattern
pattern="^(?!\s)[a-zA-Z ]{1,}$" and I used the title (title="Request Format:Not valid numeric val & special character. Only Character") for Requested pattern form in my input type html form where type="name"