Utilizing Regular Expressions in AngularJS to validate name, a 10-digit mobile number, and a 12-digit number through the ng-blur event and match

I am struggling to validate the three inputs mentioned above and having trouble using the right functions. Can someone please assist me with this?

Here is the HTML code for the 3 inputs:

<input id="name" ng-model="user.name" ng-blur="checkIfNameIsValid()" placeholder="Name"></input>

<input id="mobile" ng-model="user.phone" ng-blur="checfIfMobileNumIsValid()" placeholder="Mobile Number" maxlength="10"></input>

<input id="Aerror" ng-model="user.aadhar" ng-blur="checkIfAadharIsValid()" placeholder="Aadhar Number" maxlength="12"></input>

The JavaScript code:

$scope.checfIfMobileNumIsValid = function()
{
    var mobile=/^\d{10}$/;
    if($scope.user.phone.match(mobile) || $scope.user.phone == '' || $scope.user.phone == 'null' || $scope.user.phone == null)  
    { 
        $scope.user.mobErrorMsg = 'Mobile number is not valid'; 
        $scope.error = true;
    }
    else
    {
        $scope.user.mobErrorMsg = '';   
        $scope.error = false;
    }
}

$scope.checkIfNameIsValid = function()
{
    var name='/^[a-zA-Z ]+$/';
    if($scope.user.name.match(name)||$scope.user.name == ''||$scope.user.name=='null'||$scope.user.name==null)  
    {  
        $scope.user.NameErrorMsg = 'Name is not valid';
        $scope.error = true;
    }  
    else  
    {  
        $scope.user.NameErrorMsg = '';  
        $scope.error = false;
    }  
}

$scope.checkIfAadharIsValid = function()
{
    var aadhar='/^\d{12}$/';
    if($scope.user.aadhar.match(aadhar) || $scope.user.aadhar == '' || $scope.user.aadhar == 'null' || $scope.user.aadhar == null)  
    {  
        $scope.user.aadharErrorMsg = 'Aadhar is not valid';
        $scope.error = true;
    }   
    else
    {
        $scope.user.aadharErrorMsg = '';
        $scope.error = false;
    }

}

I am encountering an error in the browser console that says "cannot read property 'match' of undefined." Can someone provide guidance on how to resolve this issue?

Answer №1

Have you ever experimented with ng-messages in the angular framework?

Check out this sample code showcasing the use of ng-messages for validating an email:

<div>
         <label>User Email</label>
        <div>
           <input  type="text" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5828392d3418343d3a3d362b2a392a29"> −m_.p&#108m390t.ej@mb;ow!qforx)m-></a>" ng-model="user.email" name="userMail" required ng-pattern="/^[_a-z!a-zA-Z0-9]+(\.[_a-z0-9]+)*@[a-slz0-92)-c+_]*(-\-[a-s"+0-of{7]0[+6/$]+(@/g'{"$(&lid}&34')}'"</strong>/">
       </div>
       <div ng-messages="user.userMail.$error" class="error" role="alert" ng-if="user.userMail.$dirty">
        <div ng-message="required" style="margin-left: -13%;">Please provide User Email ID</div>
        <div ng-message="pattern" style="margin-left:-13%;">Kindly Enter A Valid Email Id</div>
       </div>
     </div>

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

Guide on using a pipe feature with varying arguments when the main function is called

I am delving into functional programming for the first time and have a query regarding using pipes. Imagine I have this particular function: const updateArray = R.curry((index, value, array) => Object.assign([], array, {[index]: v ...

Phonegap Application: Page design gets distorted following keyboard input

After a user enters login details and the next page loads, the layout shifts as shown in the image below. The entire app layout breaks and the view moves down to accommodate the size of the onscreen keyboard. This issue persists unless the orientation is ...

How can you efficiently choose a specific value from a dropdown menu?

I'm encountering an issue with Angular regarding selecting an item from a dropdown and updating the model. Even after searching on StackOverflow, I have only had partial success in resolving the problem. The issue arises when manually setting a valu ...

Understanding Java and JavaScript variables within a JSP webpage

I am currently working on populating a pie chart from Google with data fetched from my database. Although I have successfully retrieved the desired results in my result set, I am facing challenges in converting my Java variables into JavaScript variables ...

The usage of an import statement is not permissible outside of a module

Having some trouble using the mathjs library to calculate complex solutions for the quadratic equation. No matter how I try to import the library into my code, I keep encountering errors. Initially, I attempted this method: At the top of my root.js file, ...

Using jQuery to display items from GitHub API in a custom unordered list format

Attempting to access data from the GitHub API using jQuery (AJAX) and display it on a static webpage. Here are the HTML and JS code snippets: $(document).ready(function(){ $.ajax({ url: 'https://api.github.com/re ...

Analyzing and refreshing the data entries in firebase database

https://i.stack.imgur.com/ZMjck.png I have been attempting to modify my Username password group name. However, the update process is not successful. I am looking for a way to compare data before updating fields, but I am unable to find a suitable method. ...

Maximizing the potential of $urlRouterProvider.otherwise in angular js

I am encountering an issue with redirecting to the login screen when there is no UABGlobalAdminId in my storage. I have tried using $urlRouterProvider.otherwise but it doesn't seem to be functioning properly. When I attempt to debug, the console does ...

Guide on enabling a new input field in React when a dropdown option is selected by a user

I'm attempting to show an additional input field when the user selects "Other" from the dropdown menu. I have implemented a state for the input field that toggles between true and false based on the selected value from the dropdown. However, I am enco ...

Ensure you are focusing on elements exclusively contained within the parent table and not any child tables nested within its cells

Looking for some help with a unique situation here. I'm struggling to find the right selector for this task. For reference, you can check out the jsfiddle at this link: http://jsfiddle.net/NZf6r/1/ The scenario is that I have a parent table containin ...

The unexpected behavior in React's reconciliation process: What is causing the state to remain unchanged?

While exploring the React documentation, I came across an interesting example of resetting state: here To better understand it, I created different sandboxes to experiment with. However, I am struggling to reconcile what I observe in each of them. Each s ...

Utilizing AJAX and javascript for extracting information from websites through screen scraping

Is it possible to scrape a screen using AJAX and JavaScript? I'm interested in scraping the following link: I tried the technique mentioned on w3schools.com, but encountered an "access denied" message. Can anyone help me understand why this error is ...

Is there a way to create a function in JavaScript that eliminates duplicate Objects within an Array of Objects?

Currently, I'm working on a function to store details of a couch in a JS object with 3 properties locally. The properties include: An ID (obtained from the product URL using a function) A color (retrieved through an event listener) A quantity ...

Error encountered when calling the function .jstree() on a tree structure

While working on MVC4, I attempted to implement a jstree but encountered an issue where the tree view was not displayed when running my application. Upon investigating with Firebug, I came across the following error message: "TypeError: $(...).jstree is ...

What could be the reason behind ng-bind-html only displaying text and not the link?

Utilizing ng-repeat to exhibit a list on my webpage. One of the fields in my data contains a URL that I want to display as an actual link within my HTML page. Please refer to the screenshots below: My HTML: My rendered page: I have included the angular- ...

Is there a way to retrieve the Boolean value from an ng-show attribute without having to re-evaluate the expression?

I'm currently working on a project that involves displaying and hiding a lot of content dynamically using ng-show. Some of the expressions being evaluated are quite lengthy, like this... <div ng-show="some.object.with.nested.values && ...

JavaScript Grouping Arrays

I am working with an array and need to filter it by both Country and Service. So far, I have successfully filtered the array by Country. Now, I want to achieve the same filtering process based on the Service as well. Here is a snippet of the array: [ ...

Vue app hosted on Firebase displays a blank page when user logs in

After deploying my Vue2 project to Firebase hosting server, visitors are required to log in to access the other pages. The issue is that once a user successfully logs in, they are redirected to the next page but it appears blank. Below is what the firebas ...

How can you use ng-click to disable a div in AngularJS?

I'm looking to dynamically disable a div in AngularJS based on a certain condition. I know I can achieve this by adjusting the CSS (such as reducing contrast and color) but the div also has an ng-click property that I want to prevent from being trigge ...

The ng-style directive is not functioning properly

After selecting a category, I attempted to change the color using "ng-style" in my HTML code. However, it seems that the color change is not taking effect. This is the snippet from my HTML code: <div ng-repeat="item in ListExpense" ng-class-odd="&apos ...