Multiple patterns in <input> - html

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.

Related

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">

HTML - special input email pattern for more options

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,}">

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

HTML: Autofill form in bootstrap modal

In most HTML forms when I start typing something (say birth date) navigators propose to sit with previous similar entries. For instance on html form submit the second visit offers me the first visit entries.
However, when using a bootstrap modal containing a form, the same does not happen, for instance: with a form inside.
I do not want to use jquery autocomplete since I do not have a list of potential answers, I just want to have the same behavior in and outside modals.
Thanks.
Browser autofills are notoriously unpredictable - they make educated guesses about the data based on the name attribute of inputs. It's unlikely you'll be able to get this behavior consistently cross-browser.
can you try this :
add the attribute autocomplete = "on" on your form,
maybe it will do the job.
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
source: http://www.w3schools.com/tags/att_input_autocomplete.asp
Read through this article it should help get things working for you.
Example:
<input type="text" id="name" name="name" autocomplete="name">
<input type="tel" id="tel" name="tel" autocomplete="home tel">

Is there a way to provide a tool tip or similar for a HTML input field?

I have a html input field for which I would like to provide some additional information when typing in this field or hovering the mouse over it. I have tried the following construct:
<input type="text" onmouseover="window.status='hello world'; return true;" name="TextInput" tabindex="2" maxlength="8" class="input">
but nothing happens when I type in this field or move the mouse pointer over this field.
Is there a simple way to achieve this?
You can use the TITLE attribute for this. Pretty easy:
<input type="text" title="enter details here" />