HTML5 Pattern to email field - html

I am learning how HTML5 pattern works, and I am trying do a email field validation.
The problem is that when I add the '#' in the pattern, when I try, the field does not consider it valid. If I try the pattern without '#' works perfectly.
Requirements of the validation:
-> starts with 5 characters or numbers
-> then goes an #
-> continuous with a range between 2 and 10 characters or numbers
-> then .
-> must have 'es', 'org' or 'com'
CODE:
<input type="text" name="email" id="email" pattern='^[a-zA-Z0-9]{5}#[a-zA-Z0-9]{2,10}.(es|com|org)$'>
PD: I know the email field exists, but I'm testing the html5 patterns.

The WHATWG community shared this JavaScript- and Perl-compatible regular expression that matches the HTML5 type="email".
https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

you can use type= "email" in html 5. that will validate email but to validate email on specific pattern you need to write regex in jquery/javascript.
https://www.w3resource.com/javascript/form/email-validation.php

Related

how to use pattern attribute allowing some strings as well

I am using the pattern: [s]{1}[1-9]{1,6}
I am trying to match these conditions:
It should start with s
Followed by numeric characters (with maximum 6 digits)
Blank not allowed
It's working fine at the moment, but how can I also allow a few specific values in this regex, e.g. "admin", "superAdmin"?
<input type="text" pattern="^(([s]{1}[1-9]{1,6})|admin|superAdmin)$" />

data-val-regex-pattern is not working to negate some specfic characters

I am developing a view using html5, I want to validate a VIN field with some particular regex pattern,
So I used data-val-regex-pattern to achieve this.
My validation is to not allow the user to enter i,o,q,I,O,Q he can enter anything in a-zA-Z0-9
So I have written the regex as ^[a-zA-Z0-9&&[^iIoOqQ]]$this regex is not working.
Not working mean when ever I enter ghtygfrt9090 it is saying invalid.
Below is the code:
<input type="text" maxlength="17" data-val-regex-pattern="^[a-zA-Z0-9&&[^iIoOqQ]]$" data-val-regex="VIN is not valid">
Please help !!
The pattern you tried ^[a-zA-Z0-9&&[^iIoOqQ]]$ does not have a quantifier for the character class and if supported will match only a single occurrence of the listed.
Repeating it would look like ^[a-zA-Z0-9&&[^iIoOqQ]]+$
In some regex engines, you could use character class intersection using $$
If it is not supported, you could make use of a negative lookahead:
^(?!.*[iIoOqQ])[a-zA-Z0-9]+$
Regex demo
Another option is to update the ranges excluding the chars
^[a-hj-npr-zA-HJ-NPR-Z]+$
Regex demo

How to use HTML form validation - pattern attribute?

I can't seem to get the pattern attribute to work for the HTML form validation. I have seen a lot of tutorials and it all says the same and it works for them. Though I am using the same technique as the tutorials, I can't get it to work. For an example, please see the below code.
<label for= "firstname" id="firstname">First Name*</label>
<input type="text" name="firstname" pattern="[A-Za-z]" title="Only Alphabets" required/>
I want only alphabets to be inserted into this text box. When I insert numerals, it does ask to match the requested format which is only alphabets. But even when I enter alphabets it shows the message though it is supposed to let me submit the form. I tried all I can but can't seem to find a solution for this due my lack of knowledge. I would really appreciate if you could let me know how to enter only numbers into a field, only alphabets into a field, numbers and alphabets into a field using the pattern attribute for validation. Moreover, I was wondering whether the pattern attribute would be able to help me with this as well. For the National ID text box, I want the user to insert data in a specific format. Like this "A000000". An A in the first followed by 6 digits and if this format is not followed, then to display the message asking to match the requested format. Thank you so much in advance. (Please keep note that I am not using jquery).
Edit
May I please know how to add ' (apostrophe) along with the alphabets? Moreover pattern="[A-Za-z]+" wont let me insert spaces between words. How do I fix that?
The pattern field uses regular expressions. Try:
pattern="[A-Za-z]+"
For the national ID you could use:
pattern="A[0-9]{6}"

Why does HTML5 form-validation allow emails without a dot?

I'm writing a very simple mock-up to demonstrate some HTML5 form-validation. However, I noticed the email validation doesn't check for a dot in the address, nor does it check for characters following said dot.
In other words, "john#doe" is considered valid, when it's clearly not a valid email address; "doe" isn't a domain.
This is how I'm coding my email field:
<input type="email" required />
Is that not enough?
Check this fiddle to see what I mean.
Note: I know how to accomplish this via a RegEx pattern instead. I'm just wondering how someone could get away with using the email type instead.
You can theoretically have an address without a "." in.
Since technically things such as:
user#com
user#localserver
user#[IPv6:2001:db8::1]
Are all valid emails.
So the standard HTML5 validation allows for all valid E-mails, including the uncommon ones.
For some easy to read explanations (Instead of reading through the standards):
http://en.wikipedia.org/wiki/Email_address#Examples
Update from a comment: ICANN banned so-called "dotless" domains in 2013, but since that doesn't affect every case listed above, allowing "dotless" addresses is still valid.
Because a#b is a valid email address (eg localhost is a valid domain). See http://en.wikipedia.org/wiki/Email_address#Examples
Also, keep in mind that you should always do the input validation in server. The client side validation should be only for giving feedback to the user and not be relied on, since it can be easily bypassed.
Try adding this to the input
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,63}$"
Fiddle
The RFC 822, chapter 6, gives the specification of an address in augmented Backus-Naur Form (BNF):
addr-spec = local-part "#" domain
local-part = word *("." word)
domain = sub-domain *("." sub-domain)
Using this specification a#b is a valid address.
UPDATE
To answer the comment of Trejkaz, I add the following definitions. We see that SPACE are allowed but only in quoted string.
word = atom / quoted-string
atom = 1*<any CHAR except specials, SPACE and CTLs>
quoted-string = <"> *(qtext/quoted-pair) <">
SPACE = <ASCII SP, space>
CTL = <any ASCII control character and DEL>
qtext = <any CHAR excepting <">, "\" & CR, and including linear-white-space>
quoted-pair = "\" CHAR
This MDN page shows the regex browsers should use to validate the email:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Validation
You can slightly change this regex to require at least one dot in the domain name: change the star * at the end of the regex to a plus +. Then use that regex as the pattern attribute:
<form>
<input
type="email"
pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$"
title="Valid e-mail address including top-level domain"
required
/>
<button type="submit">Test</button>
</form>
You can customize the pattern of the email field:
input:valid {
border-color: green
}
input:invalid {
border-color: red
}
Email:
<input type="email" required value="a#b.c" /><br>
Non-dots Email:
<input type="email" required pattern="[^.]+#[^.]+" value="a#b.c" />
Here is how you can do it with html5 using regex pattern. You can also include a custom message to display.
<form>
<input type="email" value="paul#test" required pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,63}$" title="Hey, you are missing domain part in the email !!!"/>
<button type="submit">Click Me</button>
</form>
Hostnames without a TLD appear to be valid.
I say "appear" because there is this 2013 ICANN prohibition on dotless domains . . .
At its meeting on 13 August 2013, the ICANN Board New gTLD Program Committee (NGPC) adopted a resolution affirming that "dotless domain names" are prohibited.
. . . but judging from real world experience, it appears to have never been enforced.
Regardless, the PHP function FILTER_VALIDATE_EMAIL doesn't allow for dotless domain names.
So here's a simple back-end validation set-up that covers both your email and required fields:
if (empty($required_field) OR empty($another_required_field) OR
!filter_var($email_field, FILTER_VALIDATE_EMAIL)) {
// error handling here
exit;
}
While the "malformed" email may get passed the browser, it won't get passed the server.
References:
FILTER_VALIDATE_EMAIL definition
List of valid and invalid email addresses
This pattern always works for me.
Text must in lowercase pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" but I think it covers more or less most emails.

Regex pattern not working properly

I'm working on a simple check for my input fields. I got 3 places where I'm validating user-input: javascript regex, html pattern and php regex. The Javascript and PHP part work fine, but my HTML pattern somehow returns an error for every input except blank. I tested it on regexpal.com (regex tester) and it works perfectly fine there, so I reckon I must be doing something wrong.
Here's my regex:
/^[a-zA-Z0-9\!\?\,\.\s]{0,50}$/
I'm trying to allow users to input the following:
Alphabetic characters, including capitals
Numeric characters
Puncation: exclamation(!), question(?), comma(,) and dot(.)
Spaces
Here's how I implement it:
<input type="text" id="name" name="name" aria-required="true" pattern="/^[a-zA-Z0-9\!\?\,\.\s]{0,50}$/" value="loaded value from db">
Please note: I'm allowing 0 characters to be entered because I will check it with PHP, and if the input field(s) is/are empty, a pre-set value will be written to the database.
Basically it should allow users to enter general words or sentences, but somehow it doesn't allow anything. The only way I don't get an "error" is when I leave the inputfield blank. What am I doing wrong? Is my regex wrong? Am I not implementing it correctly? I can provide more code if necessary.
Help is much appreciated!
Thanks in advance.
Try removing the forward slashes (/) from the input's pattern attribute.