The validation for Australian mobile numbers should include the option to have spaces between the digits

How can I validate a mobile number properly?

  • The first text input should start with 04
  • It should have a total of 10 digits, including 04 (e.g. 0412345678)

Below is my input field:

<form name="uploadForm">
<input type="tel" name="MobileNumber" id="MobileNumber" data-ng-model="ApplicationData.MobileNumber" required maxlength="14" data-ng-pattern="/^(0?4[0-9]{8}/\s)$/">
<span data-ng-show="uploadForm.MobileNumber.$error.pattern">Please enter a valid mobile number.</span>

<input type="tel" name="Number" id="Number" data-ng-model="ApplicationData.Number" required maxlength="14" data-ng-pattern="/(^1300\d{6}$)|(^1800\d{6}$)|(^0[2|3|7|8]{1}[0-9]{8}$)|(^04\d{2,3}\d{6}$)/">

<span data-ng-show="uploadForm.Number.$error.pattern">Please enter a valid mobile number.</span>

</form>

Can someone please assist me with this?

javascriptangularjsregexangularjs-ng-pattern

Answer №1

Based on my comprehension, the following is what your regular expression pattern appears to be.

^04[0-9]{8}$

^04 - indicates the beginning with 04
[0-9]{8} - corresponds to the subsequent 8 digits
$ - signifies the end of the string

Answer №2

Consider using this regular expression for the first question, allowing for spaces between numbers.

ng-pattern="/^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$/"

As for the second question, the current solution is quite lengthy. Here is a possible alternative:

ng-pattern="/(^1300\s?([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)|(^1800\s?([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)|(^0[2|3|7|8]{1}[0-9]{8}$)|(^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)/"

If anyone is interested in simplifying or optimizing this pattern, feel free to share your ideas.

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

Trouble with the x-cloak attribute in alpine.js

Experience with TailwindCSS and AlpineJS in my current project has brought to my attention a slight issue with the header dropdowns flashing open momentarily when the login page loads. I attempted to use x-cloak to address this, but encountered some diffic ...

javascripthtmlcsstailwind-cssalpine.js

Tips for creating a 360 x 235 degree FOV image using three.js

My camera captures round images with a 235-degree field of view, like this one: https://i.sstatic.net/qNfrX.jpg I am familiar with threejs and have successfully rendered 360x360 images as equirectangular projections. However, I want to use threejs to rend ...

javascriptthree.jstexture-mapping

Several treeviews for selecting data

I need some help with a specific assignment. The back end code is all set, but I'm struggling with the UI component. The task requires two tree views, one on the left and one on the right. The left tree view will contain states with multiple children, ...

javascripthtmlcsstreeviewhtml-lists

Locate items across three different arrays

Is there a more efficient way to search for an element across 3 arrays and create a string using their values? I have attempted a solution and generated the output, but I am curious if there is a better approach available. var numbers = ['1',&ap ...

javascriptnode.js

The HTTPOnly cookie is not accessible within the getServerSideProps function in Next.js

Why isn't the jid cookie available in getServerSideProps using Next JS? Here's the scenario: https://i.stack.imgur.com/FLRGk.png The jid cookie is generated by an Expressjs API at https://api-dev.example.com. I'm attempting to retrieve thi ...

javascriptcookiesnext.jshttponly

Upgrade the jQuery code from version 1.4.2 min to version 1.10.2 min

Hey there, I'm looking for assistance with updating the code below to use jQuery 1.10.2. The backslashes are present because I am using it with PHP and need to escape special characters. I'm not very familiar with JavaScript and unsure of the ch ...

javascriptjqueryhtmlajax

Tips for importing several makeStyles in tss-react

When upgrading from MUI4 to MUI5 using tss-react, we encountered a problem with multiple styles imports in some files. const { classes } = GridStyles(); const { classes } = IntakeTableStyles(); const { classes } = CommonThemeStyles(); This resulted in ...

javascriptreactjstypescriptmaterial-uitss

Guide to placing a button on the same line as text with the use of JavaScript

Does anyone know how to add a button to the right of text that was added using JS DOM? I've tried multiple techniques but can't seem to get it right - the button always ends up on the next line. Any tips on how to achieve this? var text = docu ...

javascripthtmldombuttonalignment

Adjust the slide count accordingly when navigating to a particular item within the Bootstrap 3 Carousel

I made adjustments to the standard Bootstrap 3 Carousel so that it can navigate to a specific slide when the URL matches #. Although this feature is working, I am facing an issue with my pager-text not updating correctly when jumping to a specific slide. T ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

An error occurred while attempting to retrieve data from a JSONArray

I have been working on creating a phonegap plugin for Android where I am returning a JSONArray using callBackContext.sendPluginResult(result);. Below is the code snippet demonstrating how I am constructing the JSONArray: private JSONArray makeJsonObject(S ...

javascriptandroidjsoncordova

jQuery Does Not Iterate Through Arrays

I am encountering an issue where I am trying to populate an array with images and then pass them to a variable called $image. However, when I attempt to iterate over this array, the same item is being alerted three times. Here is the problematic code snip ...

javascriptjqueryiterator

Utilizing Next 13 for flexible MDX imports

Recently completed the Next13 + MDX Tutorial, however, I am still unclear on how to dynamically load my mdx files. My mdx files are not hosted on a remote server, so I do not require next-mdx-remote. Nonetheless, I am in need of a method to load different ...

javascriptreactjsnext.jsnext.js13

Is there a way to convert a PHP array into a JavaScript object and return it?

When I have an array defined and encode it using json_encode() $array = array("a" => "element1", "b" => "element2"); echo json_encode($array); The usual JSON output is: {"a":"element1","b":"element2"} However, my interest lies in getting this out ...

javascriptphpjson

Wildcard GET requests in Express cause routing issues when navigating to a React application

My project is derived from the React-Webpack boilerplate repository found at this link: (https://github.com/wallacyyy/webpack-heroku/blob/master/server.js). Initially, everything was working fine but now I want to add routing within my React application. T ...

javascriptnode.jsreactjsexpresswebpack

Preserve the custom hook's return value in the component's state

I am currently facing a challenge in saving a value obtained from a custom hook, which fetches data from the server, into the state of a functional component using useState. This is necessary because I anticipate changes to this value, requiring a rerender ...

javascriptreactjstypescriptreact-nativereact-hooks

Why does the Angular page not load on the first visit, but loads successfully on subsequent visits and opens without any issues?

I am currently in the process of converting a template to Angular that utilizes HTML, CSS, Bootstrap, JavaScript, and other similar technologies. Within the template, there is a loader function with a GIF animation embedded within it. Interestingly, upon ...

javascriptjqueryangulartypescriptbootstrap-4

Exploring the nuances of AngularJS testing with Jasmine and Karma: delving into the differences between using beforeEach() with

I am new to Jasmine and Karma testing, specifically when it comes to unit testing AngularJS services. When writing specs, I encountered two different ways of injecting a module into the test. 1st Type beforeEach(angular.mock.module("app")); 2nd Type be ...

angularjskarma-jasmine

Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

When visiting a website, you may notice menus that display sub-menus when hovered over. These menus and sub-menus are created using div elements, with the sub-menus hidden initially using style.display = none; The issue arises when a sub-menu is opened an ...

javascriptjqueryjsonhtmlcss

"Unexpected error: .jqm is not defined as a

Having an issue with a jqm function that I need help with. <span class="smaller gray">[ <span class="blueonly"><a href="javascript:void(0)" rel="nofollow" onclick="javascript:jQuery(\'#s ...

javascriptjqueryjquery-events

Modify the readonly property of an input element in ReactJS

I am looking to manipulate attributes on an HTML input element. Here is what I have attempted: constructor(props) { super(props); this.state = {inputState: 'readOnly'}; } And within the render function: <input className="form-contr ...

javascriptreactjs