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

Issue arising from JQuery libraries when utilizing Webpack

Having an issue with my form renderer JS script. When making an AJAX request to retrieve it, it applies functions and properties to jQuery for rendering a form. However, due to the use of webpack with another framework, there are two jQuery contexts causin ...

Facing a cross-domain problem that is blocking my ajax request to fetch data from my express endpoint

Looking to retrieve and showcase data from my node/exprss file (app.js) on my index.html. Utilizing an ajax request to localhost:3000/turtles in frontend.js, but running into cross domain obstacles. APP.JS FILE var express = require('express'); ...

Center alignment is not possible for the Div element

Problem Every time I attempt to implement the following code (outlined below), the div only appears centered when using width: 100px;. <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; mar ...

Organize your blog content by utilizing post IDs as the designated id attribute

What is the best way to format blog posts and comments in HTML so that I can easily manipulate them later using jQuery/Javascript for tasks like updating, deleting, or making Ajax calls? I am considering using the IDs (primary keys in the database) of the ...

Is it better to define a function within useEffect or externally?

What is the reason behind defining the fetchData function inside the useEffect instead of outside? Link: https://github.com/zeit/next.js/blob/canary/examples/with-graphql-faunadb/lib/useFetch.js import { useState, useEffect } from 'react' exp ...

Tips on adding a base64 encoded image string to a JSON object using JavaScript

I'm trying to convert an image file into a JSON object using JavaScript. I've managed to turn the image into a string by utilizing base64 encoding, but I'm unsure how to then convert this string into a JSON object. Can anyone help? ...

Executing jQuery code after a data update in Angular can be achieved by utilizing

Currently, I am working with Angular 1.4.7 on a site that was not set up by me. As a result, I am uncertain about the specific information needed in this scenario. We are displaying search filters, but their enabling or disabling is controlled by data fetc ...

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, ...

Unexpected results occurring during JavaScript refactoring process

Having this repetitive code snippet that switches between two radio buttons being checked within my $(document).ready(): $(document).ready(function () { $("#New").click(function () { var toggleOn = $("#New"); var tog ...

Fill in the username and password on the login page of the website when it is accessed through the mobile application

Currently, I have a Joomla website and mobile App that are hosted on different servers. Both are owned by the same party, and users have accounts on both platforms with identical ID's and passwords (even though they are stored in separate databases, w ...

"Implementing ASP.NET MVC4 with Razor: Dynamically filtering a dropdown list based on the selected value from another dropdown

Currently, I am facing a challenge where I need to filter the options of a dropdown list based on the value selected from another dropdown. Within my database, there are tables containing all countries and all cities in the world, with a foreign key linkin ...

Contrary to expectations, the middleware EJS fails to render JPG files at

I am currently working on a NodeJS server using EJS. The goal of this server is to render an HTML page that contains a line of text and a jpg file. However, I am encountering an issue with the jpg file not being loaded by the server. Even though I have sp ...

Turn off laptop camera to assess web application functionality in the absence of a camera on the device

In the process of creating an automated testing framework in Java and Selenium, I have encountered a scenario where I need to examine how a web application behaves when accessed by a user with a device lacking a camera. Is there a method to simulate this ...

The variable remains undefined, despite the fact that the code executes correctly in a different location

I'm currently working on a multiplayer game in three js and integrating socket.io for real-time communication. I have all the player characters stored in an array called players on the server side. When each client connects, I send them the list of p ...

Incorporate a fresh attribute to the JSON data in an Angular API response

I'm currently working on updating my JSON response by adding a new object property. Below is an example of my initial JSON response: { "products": [{ "id": 1, "name": "xyz" }] } My goal is to include a new object property ca ...

Determine the type of sibling parameter

Creating a Graph component with configurations for the x and y axes. The goal is to utilize GraphProps in the following manner: type Stock = { timestamp: string; value: number; company: 'REDHAT' | 'APPLE' | ... ; } const props: ...

Sending JSON-encoded data using HTML5 Server-Sent Events (SSE) is a

I have a script that triggers an SSE event to fetch json encoded data from online.php. After some research, I discovered methods for sending JSON data via SSE by adding line breaks. My question is how to send JSON through SSE when the JSON array is genera ...

What is the best approach to retrieve a username from a SQL database using AJAX within a Flask application

I have been attempting to retrieve the username column information from SQL using ajax, but only the username of the first ID is being returned. However, I need all usernames to be fetched. Below is the model: class users(db.Model): id=db.Column(db.I ...

Using prerender.io in conjunction with native Node.js

Currently, I am working on integrating prerender.io into my Angular 1.6.0 application that is being hosted on a Node.js server. The instructions provided in the documentation for setting up the middleware involve using the connect middleware, with a speci ...

Update the jQuery Get function to enable asynchronous behavior

I've recently been tasked with updating some older code to be asynchronous. The code in question is a jQuery GET function that looks like this: jQuery.get("my url", function(data){ //code here }); What steps can I take to convert this to an as ...