HTML5 Validation for numeric values

Question

I have a simple html page with two input text boxes and a submit button. When I click on the submit button with invalid email address it gives me an error message. How can i implement the same(displaying a small tooltip like popup) for other text box for numeric values?

Here is the complete html

<html>
<head>
<style>
body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
  margin: 0;
  padding: 0 5px;
}

p > label {
  display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
/* required to properly style form 
   elements on WebKit based browsers */
  -webkit-appearance: none;

  width : 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  outline: none;
}
</style>

</head>
<body><form>
<p>
    <label for="t1">What's your age?</label>
    <input type="number" id="t1" name="age">
  </p>
<p>
    <label for="t2">What's your e-mail?</label>
    <input type="email" id="t2" name="email">
  </p>
<p>
    <button>Submit</button>
  </p>
</form>
</body>
</html>

As a side note: In 99% of cases, you want to ask for a birthday, not an age. — Adam Michael Wood
– Adam Michael Wood, Commented Feb 23, 2016 at 6:09

Pranavadurai · Accepted Answer · 2016-02-23 06:08:50Z

7

A better solution is to use the pattern attribute, that uses a regular expression to match the input:

 <input type="text" pattern="\d*" />

\d is the regular expression for a number, * means that it accepts more than one of them.

answered Feb 23, 2016 at 6:08

Pranavadurai

1,0302 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mandar Patil Over a year ago

Thanks!! Is it possible to customize the error message?

Mandar Patil Over a year ago

Adding title="Numeric" gives message as "You must use this format : Numeric" message. I want the error message as "You must enter valid age."

CormacDon108 · Accepted Answer · 2021-04-30 17:31:38Z

1

<input type="number" required >
<input type="submit" >

This worked for me

answered Apr 30, 2021 at 17:31

CormacDon108

112 bronze badges

Comments

Hemant Kabra · Accepted Answer · 2016-02-23 06:05:51Z

0

As you are already using HTML 5 numeric textbox, so you do not need to setup this kind of tooltip manually. If is there any validation error then this tooltip will be automatically displayed same like email.

It's a number textbox so it won't allow you to enter any another character, except numbers, so in this case you will not get any validation error. If you are setting up any limitation like minimum and maximum value, and if validation is not true then a tooltip will be displayed automatically.

You can check tooltip by setting up some number limitations on textbox. Hope this will help you.

edited Feb 23, 2016 at 6:05

answered Feb 23, 2016 at 5:58

Hemant Kabra

88410 silver badges30 bronze badges

Comments

Prakhar Singh · Accepted Answer · 2016-02-23 06:05:55Z

0

It can be achieve by the help of javascript.

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

I'm just skipping the non-numeric characters. user will only able to fill numeric data. Hope that's what you want.

answered Feb 23, 2016 at 6:05

Prakhar Singh

2062 silver badges15 bronze badges

Comments

Yash Kumar Verma · Accepted Answer · 2016-02-23 06:55:11Z

0

well using default validation with HTML can do it without efforts

<input type="number" required >
<input type="submit" >

answered Feb 23, 2016 at 6:55

Yash Kumar Verma

9,6202 gold badges19 silver badges28 bronze badges

Collectives™ on Stack Overflow

HTML5 Validation for numeric values

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related