--- title: Numeric Entry product: Form Library description: Make sure your respondents use numeric data to answer questions that require such a data format, for example, to specify their age, weight, or height. View a free demo for JavaScript. framework: jQuery source: https://surveyjs.io/form-library/examples/numeric-entry-question/jquery index: https://surveyjs.io/form-library/examples/overview.md --- # Numeric Entry (jQuery) A numeric entry type question is a variation of a text entry question that accepts only numbers. This example demonstrates different types of numeric data entry questions supported by SurveyJS Form Library. Switch between React, Vue, Vanilla JavaScript, jQuery, and Angular to view an example for your JavaScript framework. ## Create a Numeric Entry Question To create a numeric entry form field, define an object with the `type` property set to `"text"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/pagemodel#elements) array. Within this object, specify the question's [`title`](https://surveyjs.io/form-library/documentation/questiontextmodel#title) and a unique [`name`](https://surveyjs.io/form-library/documentation/questiontextmodel#name) that identifies the numeric input question. Optionally, you can specify a [`description`](https://surveyjs.io/form-library/documentation/questiontextmodel#description) to place under the `title` and a [`placeholder`](https://surveyjs.io/form-library/documentation/questiontextmodel#placeholder) to show within the number input box. ## Specify Input Type If a question requires specific numerical input, use the [`inputType`](https://surveyjs.io/form-library/documentation/questiontextmodel#inputType) property to specify the input type. An `inputType` value is passed on to the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types) attribute of the underlying `` HTML element. This example demonstrates the `"number"`, `"range"`, and `"tel"` input types. > For use cases that require a range input, consider using the more flexible [Slider](/form-library/examples/single-value-slider-input/) question type instead. It offers such features as a customizable scale, auto-generated or custom labels, range selection, and thumb tooltips. In addition, you can specify the [`autocomplete`](https://surveyjs.io/form-library/documentation/questiontextmodel#autocomplete) property to let the browser suggest autofill values. For example, the "Phone number" form field in this demo can be populated automatically if your browser contains autofill phone numbers. ## Validate Numeric Values If you need to ensure that respondents fill out all required form fields and the format of values is correct, enable data validation. This example demonstrates the following validation types and describes how to configure them: - Required Validation Enable the [`isRequired`](https://surveyjs.io/form-library/documentation/questiontextmodel#isRequired) property for the form fields that should not be empty. - Number Range Validation Define an object with the `type` property set to `"numeric"` and add it to the [`validators`](https://surveyjs.io/form-library/documentation/questiontextmodel#validators) array. Use the [`minValue`](https://surveyjs.io/form-library/documentation/numericvalidator#minValue) and [`maxValue`](https://surveyjs.io/form-library/documentation/numericvalidator#maxValue) properties within this object to specify the range. Alternatively, you can use the [`min`](https://surveyjs.io/form-library/documentation/questiontextmodel#min) and [`max`](https://surveyjs.io/form-library/documentation/questiontextmodel#max) properties in the question object as shown in this demo. - RegEx Validation Define an object with the `type` property set to `"regex"` and add it to the `validators` array. Assign a regular expression to the [`regex`](https://surveyjs.io/form-library/documentation/regexvalidator#regex) property within this object (see the "Phone number" form field in this demo). To learn more about data validation in SurveyJS Form Library, refer to the following help topic: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation). ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import $ from "jquery"; import { Model } from "survey-core"; import "survey-js-ui"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); survey.onTextMarkdown.add((_, options) => { options.html = options.text; }); $("#surveyElement").Survey({ model: survey }); ``` ### `src/json.js` ```js export const json = { "elements": [{ "name": "number", "type": "text", "title": "Enter a number from 0 to 100", "inputType": "number", "min": 0, "max": 100, "defaultValue": 0, "isRequired": true }, { "name": "range", "type": "text", "title": "Select a value", "description": "You can use the more advanced Slider question type instead.", "inputType": "range", "min": 0, "max": 100, "step": 10, "defaultValue": 90 }, { "name": "phone", "type": "text", "title": "Enter a phone number", "inputType": "tel", "placeholder": "+0 (000) 000-00-00", "autocomplete": "tel", "validators": [{ "type": "regex", "regex": "\\+[0-9]{1} \\([0-9]{3}\\) [0-9]{3}-[0-9]{2}-[0-9]{2}", "text": "Phone number must be in the following format: +0 (000) 000-00-00" }] }] }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "jquery": "latest", "survey-core": "latest", "survey-js-ui": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/numeric-entry-question/angular.md) - [React](https://surveyjs.io/form-library/examples/numeric-entry-question/reactjs.md) - [Vue 3](https://surveyjs.io/form-library/examples/numeric-entry-question/vue3js.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/numeric-entry-question/vanillajs.md)