Exploring the internet with pattern validation in form input of type "number"

We recently encountered a strange bug in our web application that is specific to Internet Explorer. The input validation, demonstrated in this plunker, functions correctly on all browsers except IE (which we need to support from version 10 and above). Our inputs using type="number" for numerical data entry work smoothly in most browsers, ensuring that users only input valid characters. Additionally, we utilize ng-pattern="/^\d+$/" to further validate the allowed number formats, as the input type is not fully supported in IE.

The issue arises when entering letters as the first characters of an input, like "abb45". Surprisingly, IE does not recognize this as an invalid input. I read on a Stack Overflow thread that adding required to the input triggers proper validation, but this field is not mandatory for us. Furthermore, even if the input is marked as invalid, the error message does not display (the source of this validation error remains unclear).

A temporary fix involves removing type="number" which resolves the problem in IE. However, we are exploring other solutions to avoid disrupting the smooth functionality of numeric inputs in other browsers before resorting to this change.

Please note that we do not rely on jQuery (only jQuery lite since it is a dependency of Angular).

javascriptangularjsvalidationinternet-explorerng-pattern

Answer №1

Internet Explorer may encounter difficulties with the type="number" attribute. It is recommended to implement a directive that only accepts numbers.

angular.module('moduleName').directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^-0-9\.]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

, To apply this directive in HTML, add the number-only attribute to your input field:

Example: <input number-only />

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

The instance is referencing "underscore" during render, but it is not defined as a property or method

I have experience as a skilled react developer, but I've taken over a vue.js project from another developer and managed it for quite some time. Regrettably, I haven't put in the effort to learn vue properly. When using lodash, I encountered an u ...

javascriptvue.js

Traversing data in SQL Server that has been transmitted from Angular AJAX requests

Here is a snippet of the sample data being sent: { "Demo":"A 25-54", "Headlines": { "0":"Headline one", "1":"Headline two" } } This is how the post request is structured: $http({ method : 'POST', url : &a ...

sqlsql-serverajaxangularjs

Aurelia encountering an error when attempting to load Bootstrap v4 during runtime

In my aurelia.json file, I have the following configuration for bundling vendor scripts. It was directly copied from a working reference implementation and has been functioning properly. { 'build': { 'bundles': [ 'name ...

javascriptaureliabootstrap-4

Accessing any custom HTTP headers will consistently place them within the "Access-Control-Request-Headers" section

Just started learning Angular JS and currently working on a project where I need to fetch data from an HTTP endpoint. Interestingly, all the headers I define are being transmitted over the wire under the Access-Control-Request-Headers header rather than b ...

angularjshttpangularjs-directive

Exploring Typescript for Efficient Data Fetching

My main objective is to develop an application that can retrieve relevant data from a mySQL database, parse it properly, and display it on the page. To achieve this, I am leveraging Typescript and React. Here is a breakdown of the issue with the code: I h ...

javascriptsqlreactjstypescript

Display a loading spinner on the browser while the form is being submitted

My current project involves using AJAX to retrieve data and populate a form. The data being fetched is quite large, resulting in a delay as it is fetched from the database and filled into the form fields. During this process, I display a loading icon to in ...

javascriptphpjqueryajaxforms

Exploring the movement from one component to another in React Native

When working with React Native, I encountered a challenge in navigating between two views. The issue arises from having the button to navigate on one component while my main component is elsewhere. I am using react-navigation for this purpose. Here's ...

javascriptreactjsreact-nativereact-routerreact-navigation

Uploading information by merging form data with a fetch API reply

In my project, I am looking to merge two sets of data into a specific format and then make a post request. After using the fetch API, I received the following response: { "id":"some-id" } The JSON format of my form data is as follows: { "origin_ ...

javascriptreactjsaxios

Follow button on LinkedIn is secure with Google Chrome's Content Security Policy set to script-src report-sample

Having an issue trying to add a LinkedIn Follow button to the website. It works perfectly in Firefox, but is not functioning in Chrome. The Console displays the following error: The source list for Content Security Policy directive 'script-src&apos ...

javascriptgoogle-chromelinkedin-apilinkedin-jsapi

Error message: The Angular property '$ref' cannot be found in the AngularFireList<{}> type

i encountered the following error: /Users/macmini/Desktop/newap/src/app/component/content/content.component.ts (18,5): Type 'AngularFireList<{}>' is not assignable to type 'FirebaseListObservable'. Property '$ref' is m ...

javascriptangularfirebaseangular2-services

Search for URLs using both www and non-www, as well as both http and https, with the jQuery.g

I am currently using jQuery to search through a JSON string in order to find the matching URL and extract all data associated with that object. The URL is fetched using var url = window.location.href; However, this returns Within the JSON string, the U ...

javascriptjqueryjson

JavaScript object that is simultaneously multidimensional and associative

I have a requirement to create a multidimensional associative object, and I've managed to get it partially working. Here is a simplified version: var sources = { tales: ['some content', 'some more content'], thehut: [&ap ...

javascriptarrayshtml

Exploring Recursive Methods in JavaScript with Function Declarations

Recursion with function expressions raises many questions. There are two approaches to accomplishing this: one involves using a named function expression, while the other employs the arguments.callee method. However, it's important to note that the us ...

javascriptrecursionjavascript-function-declaration

Issue with Angular DataTable missing DTInstance when attempting to populate table

Has anyone encountered the problem of not having their DtInstance populated after rendering? <div ng-controller="InventoryTableController as vm"> <table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" ...

angularjsdatatablesangular-datatables

Extract information from a JSON Object using a specific pathway

Let's consider a scenario where we have a JSON Object structured as follows: var data = { "name": "abcd", "age": 21, "address": { "streetAddress": "88 8nd Street", "city": "New York" }, "phoneNumber": [ { ...

javascriptjsonjsonpath

What is the best way to merge the Material UI mini variant drawer with the code used for the dark theme switch

Using the example code from the mui mini variant drawer (https://mui.com/material-ui/react-drawer/) along with a code snippet for a dark/light theme switch, I encountered an issue where the switch does not seem to affect anything: import * as React from &a ...

javascriptreactjsmaterial-uinavigation-drawerdarkmode

Jasmine test failing due to uninitialized angular controller

I encountered some difficulties while writing jasmine tests for an AngularJS application that utilizes angular ui-router. Despite proper initialization of my services and app in the test, I found that the controllers were not starting up correctly. In an e ...

javascriptangularjsjasmineangular-ui-router

What is the best way to send props to a React component?

Sorry for the inconvenience of asking for help with finding an issue in my code, but I'm facing challenges while learning React. I am attempting to pass a variable named hashRoute to a component in react. However, every time I try to access the prop ...

javascriptreactjs

`How can data be transferred from a Vue.js file to a different HTML file?`

In the widget, the value of the "symbol" attribute needs to be dynamic based on the selected currency pair from the list. In the Vue.js file, the value of the currency pair is stored in the "symbol" variable. I am trying to pass this variable value from th ...

javascriptvue.js

When casting a ray from the inside, the raycast does not collide with the mesh

In my latest project, I've created a unique scene that involves placing my camera inside a sphere geometry. var mat = new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('0.jpg') , overdraw:true, color: 0xffffff, wireframe: fal ...

javascriptthree.jsraycasting