I am using HTML5 for user validation. Here is a snippet of my code:
<input type="text" name="name" id="usernametb" title="Minimum 8 Characters, only letters
and numbers" pattern="^[A-Za-z0-9]{8,40}$" placeholder="Enter a Valid UserName" required />
I would like for user to get an error message either as soon as they type a username that doesnt match the validation pattern or when they tab to next field. Is there an easy way to do this with HTML5.
Right now, the error message doesn't display until I click "submit" and force a postback.
I have had good experiences with the parsley.js library:
http://parsleyjs.org/
Also for other input types (eg phone, email, URL) html5 can validate by itself, won't fix the example you have but it is very powerful and an insanely lightweight tool when it fits.
eg:
<input type="tel" name="cellPhone"></input>
Good luck!
This is a html5 validation plugin for jquery: http://ericleads.com/h5validate/ .
Quote from the plugin site:
Best practice realtime HTML5 form validation for jQuery. Works on all popular browsers, including old ones like IE6.
If you want to use your own javascript, use something like:
onkeyup="validateUsername(this)"
…so for example:
<input type="text" name="name" id="usernametb" title="Minimum 8 Characters, only letters and numbers" pattern="^[A-Za-z0-9]{8,40}$" placeholder="Enter a Valid UserName" onkeyup="validateUsername(this)" required />
Happy coding!
Related
I have read this post:
https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/
It says I can use the following code to allow users to enter numbers with a number-only virtual keyboard, which is quite convenient than the traditional virtual keyboard:
<label for="creditcard">credit card number:</label> <input pattern="[0-9]*" type="text" name="creditcard">
However, there is no way to enter dot here. For instance, if I want to enter 5.6 or 6.0, I got stuck there.
Is there any way I can do this?
I hope you are doing well and safe from COVID-19.
<input type="tel" inputmode='decimal'/>
I’ve been using input type = tel it accepts pattern parameters and pulls up the number keyboard inputs on mobile.
The keyboard on mobile for type=”tel” has some phone-specific characters like #, but its not a bad solution until support for inputmode is better, even if it feels semantically wrong. It doesn’t seem to affect screenreaders in a negative way.
Thanks.
replace
<input type="number" inputmode='numeric"/>
by
<input type="number" inputmode='decimal'/>
I am currently doing homework, and following the instructions the book gives me, but I can't get the required or pattern tags to work. I am creating a survey form, and trying to make an error come up when the user doesn't type in their name, receipt number, or email. Here is a portion of it.
<label for"receipt">Receipt number *</label>
<input name="receipt" id="receipt"
placeholder="re-nnnnnn"
required="required"
pattern="^re\-\d{6}$" />
A few things i see
the required attribute does not need a value, the existence of the attribute is what makes it required or not.
the - does not need to be escaped so use ^re-\d{6}$ for the pattern attribute
the issue with the notepad++ is that the language formatting/color-coding is not up-to-date with all the attributes.
<input name="receipt" id="receipt"
placeholder="re-nnnnnn"
required pattern="^re-\d{6}$" />
there is no need to write like that u can just write : required and it will work
and whats your pattern i don't catch that
CodePen: http://codepen.io/leongaban/pen/hbHsk
I've found multiple answers to this question on stack here and here
However they all suggest the same fix, using type="number" or type="tel"
None of these are working in my codepen or project :(
Do you see what I'm missing?
Firstly, what browsers are you using? Not all browsers support the HTML5 input types, so if you need to support users who might use old browsers then you can't rely on the HTML5 input types working for all users.
Secondly the HTML5 input validation types aren't intended to do anything to stop you entering invalid values; they merely do validation on the input once it's entered. You as the developer are supposed to handle this by using CSS or JS to determine whether the field input is invalid, and flag it to the user as appropriate.
If you actually want to prevent non-digit characters from ever getting into the field, then the answer is yes, you need to use Javascript (best option is to trap it in a keyUp event).
You should also be careful to ensure that any validation you do on the client is also replicated on the server, as any client-side validation (whether via the HTML5 input fields or via your own custom javascript) can be bypassed by a malicious user.
It doesn't stop you from typing, but it does invalidate the input. You can see that if you add the following style:
input:invalid {
border:1px solid red;
}
I use a dirty bit of JS inline, it's triggered upon paste/keying (input).
Within your input tag add the following:
oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
All it's doing is replacing any character not 0-9 with nothing.
I've written a tiny demo which you can try below:
Numbers only: <input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>
Firstly, in your Codepen, your inputs are not fully formatted correctly in a form.... Try adding the <form></form> tags like this:
<form>
<lable>input 1 </lable>
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' />
<br/>
<lable>input 2 </lable>
<input type="number" pattern='[0-9]{10}'/>
<br/>
<lable>input 3 </lable>
<input type= "text" name="name" pattern="[0-9]" title="Title"/>
</form>
Just add a check to the onkeypress event to make sure that the no alphanumeric characters can be added
<input
type="text"
placeholder="Age"
autocomplete="off"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
maxlength="10"
/>
Just be clear I am not asking about validation,just pure layout. I am trying to display three separate input fields with a dash in between. Here is a link to what I have so far.
http://jsfiddle.net/kCNA4/
Here's my question is there a better way of doing this, am I doing it completion wrong or is the Way I wrote it correct. Thanks so much.
Looks pretty good to me - agree with comment, – should be used for hyphen, only a couple of improvements I would add. One, input type number (I know you are not worried about validation now) as HTML 5 input type definition. Also, use unique name for field so that when it is posted, you can identify the output.
<input type="number" value="" maxlength="3" name="phoneNumberFirst" id="mainFormPhoneFirst">
One of the facets about phone number entry is that there is a better 'type' available which many feature phones and mobile web browsers provide unique, number-only entry methods for.
<input type="tel" ... />
If you want just numeric input, this seems to be a great way to "force" that for mobile browsers (there's probably a workaround or doesn't work for all mobile browsers). You'll still need to filter and validate the input but I feel that the experience is going to be better for the mobile user.
You should try this simple input filed tags like this:
<input type="tel" name="tel1" title="3-digit" maxlength="3" minlength="3" size="3"/> -
<input type="tel" name="tel2" title="3-digit" maxlength="3" minlength="3" size="3"/> -
<input type="tel" name="tel3" title="4-digit" maxlength="4" minlength="4" size="4"/>
I tried the <input type="number" /> but on Opera that outputs a strange input box coupled with an "up and down" handler. What I expected was a regular text field that once you focus on it prompts the number keyboard instead of the alphabets. Is that even possible?
p.s. I'm not trying to validate. It would be a nice user experience, that's all.
Use pattern="[0-9]*"
Example number input: <input type="number" pattern="[0-9]*" />
Example phone input: <input type="tel" pattern="[0-9]*" />
Note: Browsers that do not support type="tel" will default to a text type
Beware: Using type="number" can cause problems with some browsers and user experience for credit card, postal code, and telephone inputs where a user might need to enter punctuation or a comma being in the output.
References:
http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/
The official HTML5 way to handle phone numbers is:
<input type="tel">
You may not have liked the "strange input box" you got with Opera when you used<input type="number" />, but that really is the appropriate type of input area when you want to require visitors to enter a numeric value.
type="number" is HTML5 and many phones do not support HTML5.
For call link you can use type="tel" or
Special A.
You should look at CSS WAP extensions (page 56) too.
EDIT 10/2015:
Most if not ALL smart phones support HTML5 and CSS3, so type="number" is the best way.
This post is now invalid. All smartphones support HTML5 and CSS3 now, so adding type="number" does in fact prompt the number pad to pop-up. I just checked it on 2 different Android versions, and an iPhone. Just so no one in the future tries WAP instead of the correct HTML5 format.
This will work on mobile and will prevent the letter "e" (along with all other letters) from being allowed to be typed in in the desktop version of your page. type="number" by itself still normally allows "e" per spec:
<input pattern="[0-9]*" type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
If you use type="number" in the above, then if you type "123" then "e" the oninput JS will replace all contents of the box. Just use type="text" if you really just want integer values.
You can control the style of keyboard that comes up on input focus, independently of the input type, with the HTML attribute inputmode. What you're probably looking for is inputmode="numeric", which shows a number pad with 0-9. There are other options, such as a number pad with # and *. See the docs linked below.
This is ideal for uses cases where type="number" would not work, such as numbers formatted with dashes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
Try <input type="number" pattern="/d*">
OR
<input type="tel" pattern="/d*">
This will help if you working with Android.