html5 pattern match float and/or percentage
You are almost there. Add %?
to your pattern:
input:invalid {
color: red;
}
<input type="text"
pattern="[0-9]+(\.[0-9]{1,2})?%?"
title="This must be a number with up to 2 decimal places and/or %">
Al Amin Chayan
About 9 years of experience in all facets of web development, from personally meeting with clients to discuss their goals in having a web presence, to research and analysis, design, development, and testing, as well as implementation of code and applications. Has been both a team leader and a team member, and knows what it takes to get things done. Doesn’t only create working inter/intranet sites, but creates better ones and continually strives to improve a site's usability, functionality, and navigation throughout its life-cycle.
Updated on June 04, 2022Comments
-
Al Amin Chayan almost 2 years
I'm working with form validation and want to use pattern attribute for validate the input field. The field has the following criteria:
- It must be a number (Integer or Float)
- Can allow up to 2 decimal point (e.g.: 100.24)
- Only one dot is allowed (e.g.: 100.25.35 is not valid)
- May end with a percent(%) sign (But not always necessary)
So what should be the exact pattern
RegEx
for that. I'm trying with the following code but how to implement the percent condition?<input type="text" pattern="[0-9]+([\.][0-9]{0,2})?" title="This must be a number with up to 2 decimal places and/or %">