HTML - special input email pattern for more options - html

I need a specific pattern for email input. There should be 2 options:
john#doe.com
john#doe.com:anything
I need to fit in the ":anything" and make more possibilities after ":".
At the moment I'm using this but it does only validation for normal email:
<input class="input-fields" id="formUsername" name="username" type="text" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}" autofocus required/>
I tried many combinations but I just can figure out the right one.

You could add ':?\w*' to Your regex, so it would look like
[a-z0-9._%+-]+#[a-z0-9.-]+.[a-z]{2,3}:?\w*

can't you just add more textboxes(only for the extra part fiddle here)?
Optional(only for blahblahblah):
<input class="optional-fields" title="optional" id="designation" type="text" pattern="[a-z]{5,}">

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 use ng-mask in angularjs

how to use ng-mask for validation of phone number having pattern (xxx)xxx-xxxx . I tried using "pattern" in the input html tag but not satisfied with the result
because each time when user enters the phone number, the user must type both '()' and '-',and this will make the user annoying. So suggest a way to overcome this.
<input type="tel" name="phoneno" maxlength=13 ng-model="phone.number" pattern="^(?:\(\d{3}\)|\d{3}-)\d{3}-\d{4}$" required/></div>
This should work:
<input type="text" ng-model="phone.number" name="phone" mask="(999) 999-9999" clean="true" ng-model="phone">

how to check if the inputted email has "#" on it

i have a text field for email which is set to required, i want it to show a text that you need to include "#" on your email. like how it displays "fill out this field" when you pressed the button without typing anything on the field. How can i do it? Thanks.
EXAMPLE:
<input type="text" name="email" required>
You can try to use the type in case you are using HTML5 as:
<input type="email" name="email" required>
If you are not using the HTML5 then you need to use some scripting language like Javascript to check the validity. For example in Javascript it would be like:
if(!document.getElementById("email").checkValidity())
In case of PHP it would be like
if (filter_var($email, FILTER_VALIDATE_EMAIL))
You can check it by using (since HTML5):
<input type="mail" name="email" required>
It will display a warning if format is not correct (tooltip, or red color around the field, depending on your browser.
Or you can check it on the server side, once you form is sent. For example with PHP, you can use filter_var
Use pattern attribute,
<input type="text" name="email" pattern=".*[#]+.*" />
<input type="email" name="email" required />
More details are at: http://www.w3schools.com/tags/att_input_pattern.asp

Multiple patterns in <input>

I am trying to use multiple patterns for an input-field in HTML5.
<input type="text" pattern="\d*.{5,10}" name="plz">
My current input field does not work. Only the second pattern .{5,10} is relevant for the submit. The first attribute \d* hast no effects.
Try the below:
<input type="text" placeholder="" class="form-control" pattern="([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{4})([0-9]{1})">
and just accept AESE640526HOCCNL05...
Hope this can help you.

HTML field to be set as optional

I have a quick question which I am a bit confused about...
I know in HTML you can have fields required in a form but I want to make the full name field below required which is fine
<input type="text" name="fullname" id="fullname" placeholder="Full
Name" required="required"/><br/>
But the tiny issue I am having which I dont know how to fix is I want to make the other field optional so the user can submit the form even without filing it out.
<input type="text" name="Other" id="fullname"
placeholder="Other"/><br/>
Any ideas ?
Thanks ! :)
Fields are optional by default. Don't put the "required" flag if you don't want it to be required...!
Just remove the required attribute from the one you want to be optional and it won't require that to be filled out for submission.