What happens when the "input type=number" displays an error message after the user enters "five hundreds"?

If a user enters something other than a number in the field (like "five hundred" or "9987-"), Angular does not treat it as an error and no error is displayed (the ng-class remains unchanged in this scenario).

<div class="form-group"
     ng-class="{ 'has-error' : submitted && form.price.$error.pattern }">
        <input name="price" id="price" type="number"
               ng-model="formOb.price"
               ng-pattern="/^[0-9]+([\.|,][0-9]+)?$/"
                />

Is there a way to address this issue? How can the class be changed to 'has-error'? (preferably without using direct JavaScript)

javascriptangularjsuser-input

Answer №1

Using ng-pattern is essential when binding an HTML tag with a name attribute. The name attribute alone is sufficient to ensure your example functions correctly.

To learn more, visit: AngularJS Forms

Answer №2

To ensure proper validation with Angular, set the input type as "text" - using ng-pattern for validation. If you use type="number", some browsers may not even pass the input value for pattern checking.

<div class="form-group"
     ng-class="{ 'has-error' : submitted && form.price.$error.pattern }">
        <input name="price" id="price" type="text"
               ng-model="formOb.price"
               ng-pattern="/^[0-9]+([\.|,][0-9]+)?$/"
                />

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

Tips for adjusting the position of an infowindow in ArcGIS

I have implemented the use of infowindow in arcgis to display certain information. https://i.sstatic.net/Dnpas.jpg Currently, the infowindow is appearing directly over my icon. Is there a way to adjust its position if it covers the icon? ...

javascriptarcgisarcgis-js-api

Is it feasible to create a doughnut chart with curved edges?

My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful. https://i.sstatic.net/Rq6Lx.jpg I want each segment to have fully rounded corners, which presents a unique challenge. ...

javascriptcsssvgchartshtml5-canvas

The Material UI React Table onCellClick event is not triggering as expected when clicking on a

I am facing an issue with my react component that contains a material UI Table. I want to add an onCellClick event to each row of the table, but when I add it to each TableRow individually, the event doesn't get fired. However, if I add it to the Tabl ...

javascriptreactjsmaterial-ui

Why is there a 'SyntaxError: Unexpected token e in JSON at position 0' error appearing exclusively on Chrome?

Today, I came across an unusual error that seems to only occur when loading localhost:9000 on Chrome! Interestingly, http://parke.linkpc.net:9000/ works perfectly fine on Chrome. On the other hand, localhost:9000 runs smoothly on Firefox. Even after going ...

angularjsjson

What measures can be taken to safeguard this hyperlink?

Is there a way to conceal HTML code from the source code? For instance: jwplayer("mediaplayer").setup({ file: "http://example.com/Media.m3u8", autostart: 'true', controlbar: 'bottom', file: "http://exa ...

javascriptphphtmljwplayer

What is the best way to code a JavaScript button that triggers a transition both when clicked and scrolled?

I am working with a .js document that enables me to switch between different pages within the same html document. Currently, I have a trigger button that activates the transition only on click, but I would like it to also activate on scroll or on scroll al ...

javascripthtmlbutton

What is the best method for returning the AJAX outcome to the JSP page?

Using AJAX, I am able to post data from my JSP page to my servlet. $.ajax({ url: 'myServlet?action=FEP', type: 'post', data: {machine: i, name: txt}, // where i and txt hold certain values success: f ...

javascriptajaxjspservlets

Ways to prompt the user to upload a file and integrate it into my program

Hello everyone, I need some help figuring out how to replace a JSON file with another JSON file that a user uploads. Here is my JavaScript code: var app = angular.module('miApp', []); app.controller('mainController', function ($scope ...

javascriptjsonangularjsfile-uploadupload

Confusion in NodeJs and Express response handling

I am having an issue with my tabular form page where I have a controller assigned to each row, and based on the column value, I'm setting variables within the controllers. However, when I make multiple simultaneous requests to the same controller but ...

angularjsnode.jsexpressserver

Changing the values of an array to strings using javascript

I am trying to work with an array that contains elements [ABC, QWE, XYZ]. How can I convert it to ['ABC', 'QWE', 'XYZ']? When attempting to manipulate values within the current array, I encounter the following error: Referenc ...

javascriptarraysstring

Storing and retrieving data from dynamic JSON responses in AngularJS: A comprehensive guide

As a newcomer to AngularJS, I am facing a challenge with fetching and storing dynamic session IDs from JSON responses when users login with their email ids. The JSON response from the backend includes a 12-digit session ID along with other details like gr ...

angularjsjson

The .click() function seems to work only once before stopping, requiring a full page refresh to function again. Interestingly, $(document).ready() does not seem to fire at all in this situation

I'm currently working on a functionality to fetch quotes and their authors from a JSON file. The main issue I'm facing is that after clicking the button once, the event only fires once and doesn't work again. Additionally, when I try to call ...

javascripthtmljquery

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM Now, I'm attempting to achieve the same effe ...

javascriptjquerycssreactjs

Retrieve information about the clicked item using the Backbone framework

I have a unique webpage that showcases an impressive collection of books. Each book listed on the page comes with essential information such as the title, price, and description. This data is imported from a JSON file. Excitingly, when users click on any ...

javascriptjquerybackbone.jsunderscore.jsclick

Error retrieving Facebook access token using Node.js https.get()

I've been working on setting up a Facebook login flow in my node.js app, but I'm facing an issue where the access token isn't returning from the Facebook API when using node's https.get() method. Interestingly, I am able to retrieve the ...

javascriptfacebooknode.jsfacebook-graph-api

Creating session variables in Joomla using checkboxes and AJAX

I'm currently working on implementing session variables in Joomla with AJAX when checkboxes are selected. Below is the code snippet from select_thumb.ajax.php file: $_SESSION['ss'] = $value; $response = $_SESSION['ss']; echo ...

javascriptphpajaxsessionjoomla

Issue with Vue JS component on blade template page

Having trouble loading a Vue component into a Laravel blade file? Despite making changes, the content of my vue file isn't showing up in the blade file - even though there are no errors in the console. Any suggestions on how to resolve this issue woul ...

javascripthtmllaravelvue.js

Can a parent class retrieve an attribute from one of its child classes?

Within my code, I have a parent class where I am creating a function called store-relation and a child class that defines a table in the store. The issue arises when I try to connect the save() function from the parent class to the child's table which ...

javascripttypescript

Experiencing trouble with your ajax call and encountering an error?

After making an Ajax call to one of the pages on my server, I encountered an issue. Despite receiving a status code of 200 OK in red font color within Firebug, I did not receive the expected data. The source of this problem eludes me. The API pages I atte ...

javascriptphpjqueryajax

Tips for displaying tab content with CSS Grid areas

I have successfully implemented a tabbed interface using CSS Grid areas. However, I am encountering an issue where the tab content is not displaying and the console shows a value of null. Below is the code snippet that I am currently working with: funct ...

javascriptcssgrid