Ensure that the input field only accepts numerical values

Can anyone help me with an issue I'm facing in my plunker? I have an input text field that I want to accept only numbers. Despite trying normal AngularJS form validation, the event is not firing up. Has anyone encountered a similar problem or can provide some insights?

Link

  <input type="text" ng-model="valuesForOutputs[item.name][i]" 
               ng-disabled="isDisabled(item.name, i)" ng-pattern="/^(\d)+$/"  
                             required   name="value"
                                               placeholder="Enter value">
       <span class="error pop_up" ng-show="targetForm.value.$error.pattern">Please enter only number</span>
javascriptangularjsangularjs-ng-repeat

Answer №1

To restrict input to numbers only in a textfield, you can utilize the onkeypress event:

 var allowOnlyNumbers=function(field){
        if (!String.fromCharCode(event.keyCode).match('[0-9.]') || (field.value.match('[.]') && String.fromCharCode(event.keyCode) == '.'))
           event.preventDefault();
    };
 <input onkeypress='allowOnlyNumbers(this)' type="text" ng-model="valuesForOutputs[item.name][i]" 
               ng-disabled="isDisabled(item.name, i)" ng-pattern="/^(\d)+$/"  
                             required   name="value"
                                               placeholder="Enter value">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to pass the Exact property in React MaterialUI Button with RouterLink Component?

I came across this code snippet: <Button activeClassName={classes.active} className={classes.button} component={RouterLink} exact={true} to="/app/certificates" > Certificates </Button> <Button activeClassName={classe ...

javascriptreactjsreact-routermaterial-ui

Looking to customize session data for my online game within the same interface

I have successfully coded a game called Ninja Gold using PHP with CodeIgniter. The game works by setting session variables (Gold and Activities) when the index page loads if they are not set already. Each location clicked adds a certain amount of gold to t ...

javascriptphpjqueryajaxcodeigniter

Sending various types of data to an MVC C# controller using AJAX

Currently, I am utilizing AJAX to retrieve information from a Razor View and forward it to the controller. Although everything is functioning as expected, I now face the challenge of passing an array along with a string as the data: // View - JavaScript v ...

javascriptc#jqueryajaxasp.net-mvc

Exploring Node.js Express: Understanding the Difference Between Modules and Middleware

I am working on an express rest api and need to create a PDF document with a link to download it. I have successfully generated the PDF, but now I want to create a route specifically for returning the PDF link. In addition, I also need other routes that ...

javascriptnode.jsapirestexpress

Is there a way to change my cursor to a pointer finger when hovering over my box?

<script type="text/javascript"> function draw() { var canvas = document.getElementById('Background'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.lineWidth = 0.4 ctx.strokeRect(15, 135, 240, 40) Is there a w ...

javascripthtmlcss

Create an XML file with recurring elements based on JSON data

Currently, I am utilizing the xmlBuilder library within Nodejs to generate XML from a prepared JSON object. My approach involves crafting the JSON structure first and then transforming it into XML using Javascript as the coding language. The specific XML ...

javascriptnode.jsjsonxmlxml-builder

Implementing a toggle function in Vue.js to add or remove a class from the body element when a

I'd like to add a toggleable class to either the body element or the root element("#app") when the button inside the header component is clicked. Header.vue : <template lang="html"> <header> <button class="navbar-toggler navbar-tog ...

javascriptvue.jsvuejs2vue-component

Is there a way to launch only a single popup window?

Recently, I came across this piece of Javascript code which is causing me some trouble: function call() { popup = window.open('http://www.google.co.in'); setTimeout(wait, 5000); } function caller() { setInterval(call, 1000); } func ...

javascripthtmlpopuppopupwindow

Using AJAX, FLASK, and JavaScript to send an existing array to an endpoint

Having trouble POSTing the array songFiles generated by the getTableData() function (inside an ajax request) to the /api/fileNames endpoint, and then handling it in the postFileNames() callback function. Any assistance or alternative approaches would be gr ...

javascriptarraysajaxflaskpost

Enhancing functionality with extra JavaScript tags in next.js

Recently, I delved into programming with react & next.js after previously working with node.js. It didn't take long for me to create my first application, but upon inspecting the page, I noticed an abundance of extra JavaScript code (see image below). ...

javascripthtmlreactjsnext.js

Using Linux variables in the .env file of your Vue.js project can provide a convenient way to

Using .env in a *.js file allowed me to set the BANK variable as either A_BANK or B_BANK like so: BANK=A_BANK or BANK=B_BANK However, when passing the argument as A_BANK or B_BANK like: --bank A_BANK in a shell script loop for var in $@ do if [ ${var} ...

javascriptnode.jsshellvue.js

Why Jquery's nth-child selection and conditional formatting are failing to work

I am working with a table and need to format specific data fields based on their content. For instance, any field less than 95% should be highlighted in red. Below is the jQuery code I am using: $(function(){ $('#ConditionalTable td:nth-child(2n ...

javascriptjqueryhtmlcss

Updating a class within an AngularJS directive: A step-by-step guide

Is there a way to change the class (inside directive) upon clicking the directive element? The current code I have updates scope.myattr in the console but not reflected in the template or view: <test order="A">Test</test> .directive("test", ...

javascripthtmlangularjsangularjs-directive

I am interested in dynamically rendering the page on Next.js based on certain conditions

In my -app.js file, I have the code snippet below: import { useState, useEffect } from "react"; import PropTypes from "prop-types"; ... export default function MyApp(props) { const { Component, pageProps } = props; co ...

javascriptreactjsnext.jsuse-effect

Show the chosen item from a dropdown menu using Bootstrap

Here is the HTML code that I am working with: <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="h ...

javascripthtmlbootstrap-4

Encountering issues while trying to duplicate react-table CodeSandbox: API error when using localhost

Trying to implement this CodeSandbox project into my own project has been challenging. On navigating to the Example component, a 404 error pops up: Error: Request failed with status code 404. The API is targeting this endpoint: http://localhost:3000/api/pr ...

javascriptreactjsreact-nativereact-tablecodesandbox

Populate a Textbox Automatically using a Dropdown List

MVC 4 Changing multiple display fields based on DropDownListFor selection Having some issues trying to implement the solution mentioned above. It seems like there might be a problem with either my javascript code or the controller. JavaScript in View ...

javascriptc#ajaxasp.net-mvc

Exploring the intricacies of password reset functionality in Node.js and Angular

I am currently exploring the implementation of password reset and forgot password features using AngularJS (1.x) with Nodejs as the backend. After coming across this informative article on Nodejs backend setup, I stumbled upon a relevant discussion on Angu ...

angularjsnode.jsauthenticationtoken

Ensure that text input is restricted from containing any HTML or script tags when utilizing the Web API within an HTML page

On a html page, there are two text boxes provided for entering Employee Name and Employee Age, along with a Save button. Clicking this button triggers the Web API method called SaveEmployeeData to save the data. This Web API is hosted on an asp.net website ...

javascriptc#htmlvalidationasp.net-web-api2

What is the best way to transform a synchronous function call into an observable?

Is there a conventional method or developer in RxJS 6 library that can transform a function call into an observable, as shown below? const liftFun = fun => { try { return of(fun()) } catch (err) { return throwError(err) } ...

javascripttypescriptrxjsreactive-programming