Having difficulty validating the field accurately with Angular.js

Question

Having difficulty validating the field accurately with Angular.js

In order to validate the input field in accordance with the user's needs using AngularJS, I have shared my code below:

<div ng-class="{ 'myError': billdata.longitude.$touched && billdata.longitude.$invalid }">
  <input type="text" name="longitude" id="longitude" class="form-control oditek-form" placeholder="Add Longitude coordinate" ng-model="longitude" ng-pattern="/^[0-9]+([,.][0-9]+)?$/" ng-keypress="clearField('businessno');">
</div>
<div class="help-block" ng-messages="billdata.longitude.$error" ng-if="billdata.longitude.$touched">
  <p ng-message="pattern" style="color:#F00;">This field only allows numbers (e.g. 0,1..9).</p>
</div>

The requirement here is that users should be able to enter numbers only with a + or -, such as +123.45 or -095.4567. However, currently, the use of + or - is not allowed, only numbers are permitted.

javascript angularjs

Answer 1

Answer №1

Make sure to enable the appropriate symbols in the regular expression pattern.

ng-pattern="/^(\+|-)?[0-9]+([,.][0-9]+)?$/"

Answer 2

Make sure to enable the appropriate symbols in the regular expression pattern.

ng-pattern="/^(\+|-)?[0-9]+([,.][0-9]+)?$/"

Answer 3

Answer №2

ng-pattern="/^([+|-][[0-9]+([,.][0-9]{n,m}))]?$/";

It is recommended to use the provided pattern and replace 'n' with the minimum number of decimal places allowed, in this case being 0, and 'm' with the highest number of decimal places permitted.

Answer 4

ng-pattern="/^([+|-][[0-9]+([,.][0-9]{n,m}))]?$/";

It is recommended to use the provided pattern and replace 'n' with the minimum number of decimal places allowed, in this case being 0, and 'm' with the highest number of decimal places permitted.

Answer 5

Answer №3

Creating your own directive for custom validation is a great way to enhance your AngularJS application. Here's an example:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="HomeCtrl">
    <div>
      <form novalidate name="myForm">
        Number: <input type="text" name="valText" ng-model="val" even-number />
      </form>
    </div>
    <div>
      <span style="color: red;" ng-show="myForm.valText.$error.evenNumber">Invalid value</span>
      <br />
      <br />
      <button ng-click="setValue(22)">Change Value to 22</button>
      <br />
      <button ng-click="setValue(19)">Change Value to 19</button>
    </div>
  </body>

</html>

Check out the live demo on Plunkr!.

With this Even Number directive, only even numbers are allowed for validation.

Answer 6

Creating your own directive for custom validation is a great way to enhance your AngularJS application. Here's an example:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="HomeCtrl">
    <div>
      <form novalidate name="myForm">
        Number: <input type="text" name="valText" ng-model="val" even-number />
      </form>
    </div>
    <div>
      <span style="color: red;" ng-show="myForm.valText.$error.evenNumber">Invalid value</span>
      <br />
      <br />
      <button ng-click="setValue(22)">Change Value to 22</button>
      <br />
      <button ng-click="setValue(19)">Change Value to 19</button>
    </div>
  </body>

</html>

Check out the live demo on Plunkr!.

With this Even Number directive, only even numbers are allowed for validation.

Having difficulty validating the field accurately with Angular.js

Answer №1

Answer №2

Answer №3

Similar questions

Integration of AngularJS with PHP for Seamless User Authentication

Enter a socket.IO chat room upon accessing an Express route

Tips for passing props while clicking on a v-data-table:

What is the best way to incorporate JQuery into html content retrieved through an ajax request?

Protractor: Decrease the magnification

Chrome Developer Tools - Array Length Discrepancies

Struggling to render images within a child component in a React application when passed as a prop from the parent component

The use of set.has in filtering does not produce the desired outcome

Connect my Vue.js model data to the object that will be used for submission

The Jquery script is ineffective for newly added elements

Integrating a bokeh chart within a Flask application

The preflight OPTIONS request for an AJAX GET from S3 using CORS fails with a 403 error

Locate the class ID and refine the search results by another class

Update the configurable product process for the custom attribute 'delivery_time' in Magento 1.9.2

Struggling to modify a document in a MongoDB collection with an HTTP Put request?

Performing Jasmine unit testing on a component that relies on data from a service, which itself retrieves data from another service within an Angular 2+ application

Issue encountered: NPM error, unable to find solution for resolving dependency and addressing conflicting peer dependency

incorrect implementation of react lifecycle phases

Tips on replacing views within ion-view and updating the title in the title bar to match the injected page through the use of Ionic and AngularJS

The main.js file will be served by nodeJS using express