This Example will focus on Number validation on the web or simply HTML5 number validation. It is common place to process numbers on the web (the numbers might be a users age, date of birth or telephone numbers ). When or after collecting these numbers, it becomes necessary to validate this input, so as to avoid storing invalid or corrupted data.
\n
\n
\n
\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n
\nFor example a user can maliciously or unintentionally enter a letter when asked for his\/her age, your web app should be smart enough to recognize this blunder and alert the user.
\nIn this example we will learn how to validate numbers in HTML5.
\nFor this example we will use:<\/p>\n
In this tutorial we will start with simple examples and move on to more complex ones. Lets start with dates.<\/p>\n
In this example we will consider dates as numbers- though some might argue against it. It’s wrong to collect a user date of birth or dates in general with Here’s an Example:<\/p>\n index.html<\/em><\/span><\/p>\n When you use an input of type date, depending on browser support, a date picker can show up in the input field.<\/p>\n HTML5 provides an input type for telephone numbers. Line-breaks are automatically removed from the input value, but no other syntax is enforced.<\/p>\n The input type tel is currently supported only in Safari 8.<\/p>\n HTML5 provides an input type for month and year, depending on browser support, a date picker can show up in the input field.<\/p>\n index2.html<\/em><\/span><\/p>\n HTML5 provides an input type for week and year, depending on browser support, a date picker can show up in the input field.<\/p>\n index2.html<\/em><\/span><\/p>\n HTML5 has an input type for numbers (numeric values ). Its type is number. An input field of type number only takes numeric values as its input. An example of input type number shows below:<\/p>\n index4.html<\/em><\/span><\/p>\n In this example we learnt about number validation in HTML5. We learnt how it is possible to validate user numeric input in HTML5 without writing unnecessary and tedious JavaScript code.<\/p>\n< input type=text><\/code> You should always use < input type=date ><\/code>.<\/p>\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> HTML5 Image Zoom Example <\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n<input type=date>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n<\/pre>\n1.2 Telephone Numbers<\/h3>\n
\u00a0 Telephone:\r\n\u00a0\u00a0\u00a0<input\u00a0type=\"tel\"name=\"phone\">\r\n\r\n<\/pre>\n
1.3 Month<\/h3>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> HTML5 Number Validation Example <\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n<input type=month name=mon>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n1.4 Week<\/h3>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> HTML5 Number Validation Example <\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n<input type=week name=mon>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n<\/pre>\n1.5 Numbers<\/h3>\n
\nBelow are some attributes that can be used with input type number or any other input type.<\/p>\n\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> HTML5 Number Validation Example <\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\r\n<input type=number name=mon min=0 max=10 step=10 value=20>\r\n<!-- disabled input field-->\r\n<input type=number name=mon min=0 max=10 step=10 value=20 disabled>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n2. Summary<\/h2>\n
3. Download the source code<\/h2>\n