HTML form validation with the “pattern” attribute - html

I am trying to come up with a valid pattern for an HTML form. I would like to allow *#student.*.edu.vn
This is my code:
<input
type="text"
name="mail"
pattern="([a-z]|[0-9])+(#{1})+(student)+(.)+[a-z]+(.edu.vn)"
/>
It does not work as I would like. What I am doing wrong?

The pattern (regular expression) is slightly wrong as you haven't escaped all your special characters such as the . and have some unnecessary parts within it. Try using the following slightly modified pattern instead:
([a-z]|[0-9])+#student\.[a-z]+\.edu\.vn
<form>
<input type="text" name="mail" pattern="([a-z]|[0-9])+#student\.[a-z]+\.edu\.vn" />
<input type="submit">
</form>
Note: Make sure that you also do validation on the server-side as anyone entering values into a form can remove the pattern to bypass this check.

I came up with this solution which is slightly more easy to read and is less strict (which is a good thing because e-mail addresses can contain a lot more characters than just lowercase alpha-numeric ones. Don't forget to do proper validation on the backend using an e-mail validator.
<form>
<input
type="text"
name="mail"
pattern=".+#student\..+\.edu.vn"
/>
<input type="submit">
</form>

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"

HTML Input pattern for "currency" field

Attempting to use a regex pattern for an HTML input element that limits the characters to 0-9, ",","-",".","$"
I have very little experience in regex and used the pattern=[0-9,.-$] on the input element and it does not work. Though I plan on studying regex intensely in the future, I need a little help on this for now. Thank you.
<form>
<input name="currency" pattern=[0-9,.-$]>
<button>Submit</button>
</form>
don't use regex, use native type="number" that will do job for you with no need for regex
coverage is almost full > https://caniuse.com/#feat=input-number
<form>
<input type="number" name="currency">
<button>Submit</button>
</form>
You have two problems.
- indicates a range, you already used it as such for 0-9. .-$ isn't a valid range. A validator would have highlighted this for you. You need to escape the -.
You are only matching one character. You need to match multiple so use something like + to mean one or more
<form>
<input name="currency" pattern="[0-9,.\-$]+">
<button>Submit</button>
</form>

HTML form - input validation with Alphanumeric with symbols ()._-‘ only

I want to validate below input with Alphanumeric and ()._-‘ symbol only.
<input type="text" name="companyName" value="" pattern="[A-Za-z0-9()._-‘]+" title="Alphanumeric with symbols ()._-‘ only" required> </p>
But, when I try the input, only ._‘ can be used, ()- are not working.
You need to escape those characters. They have significance in RegEx and aren't treated as part of the expression. Try the following: [A-Za-z0-9\(\)._\-‘]+
Works fine for me, with the exception of the '-' which probably needs to be first:
[-A-Za-z0-9()._‘]
Try the code below. I don't know why, but the order for the pattern attribute matters.
<form>
<input type="text" name="companyName" value="" pattern="[A-Za-z0-9()_.'-]+" title="Alphanumeric with symbols ()._-‘ only" required>
<input type="submit">
</form>

HTML5 pattern attribute being ignored

Just trying to make a field that only accepts 8-digit numbers and every browser lets it pass with any number of digits.
<form>
<input type="number" pattern="[0-9]{8}" required>
<input type="submit">
</form>
I feel like I'm missing something really obvious here am not seeing the problem with my pattern.
Codepen: https://codepen.io/mavelo/pen/VVZvoP
<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Pattern_validation

HTML5 email does not allow email with a period

The following email is not accepted with a period, is this a regular expression issue or some bug.
This works
abcdefg.jijklmn#abcdedghijklmnopgi.com
but the following doesn't (note uppercase letter in the email "A" and "J"), i think that is the problem
Abcdefg.Jijklmn#abcdedghijklmnopgi.com
Html element
<input type="email" class="form-control" name="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[![\[][1]][1]a-z]{2,3}$" required="" value=""/>
Error below
It's because your regex doens't allow capitals.. simply allow capitals..
[a-zA-Z0-9._%+-]+#[a-z0-9.-]+\.[![\[][1]][1]a-z]{2,3}$
Regular expressions for emails can be very difficult. However, you don't actually need to use a pattern to validate emails as type="email" does that for you. Simply remove the pattern entirely and the clients browser will validate the email for you using their in-built regex
<input type="email" class="form-control" name="email" required="true" value=""/>
I can't actually seem to get email validation to work with the pattern attribute at all, as I think it's competing with type="email".