Issues with AngularJS email validation specifically related to domain names are causing errors

Hello, I'm currently working on an AngularJS application where I'm implementing email validation. I'm facing an issue where I expect an error message to appear when I enter 'test@test', but it's not working as intended.

Here is the code snippet:

       <div class="inputblock with-icon mail" ng-class="{ 'has-error' : ((form.$submitted && form.email.$invalid)|| (form.email.$invalid && form.email.$dirty))}">
                        <label class="inputblock-label" ng-show="user.email">{{ 'Email' | translate }}</label>
                        <span class="input-icon"><img src="images/mail-icon.png"></span>
                        <div>
                            <span class="ang-error" style="color:#fff" ng-show="form.email.$dirty && form.email.$invalid">
                                <span ng-show="form.email.$error.required && form.email.$dirty">* {{'Required' | translate}}</span>
                                <span style="color:#fff" ng-show="form.email.$error.email">{{'Invalid EmailId' | translate}}</span>
                            </span>
                        </div>
                        <input type="email" 
                               class="with-icon" 
                               ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" 
                               placeholder="{{ 'Email' | translate }}" 
                               ng-model="user.email" 
                               required="" 
                               name="email" 
                               my-maxlength="50">
                    </div>

Upon entering 'test@test', the following code is displayed in the browser:

<input type="email" class="with-icon ng-dirty ng-valid-required ng-invalid ng-invalid-pattern ng-valid-email ng-touched" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" placeholder="Email" ng-model="user.email" required="" name="email" my-maxlength="50" ng-trim="True">

Here is a screenshot of the field after entering 'test@test': https://i.sstatic.net/iHev3.png

And here is a screenshot after entering 'test@': https://i.sstatic.net/u4sWt.png

Any suggestions on how to resolve this issue would be greatly appreciated. Thank you.

Answer №1

Give this a shot:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$/;
    $scope.model = "test@test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <form name="form">
         <input type="text" ng-model="model" id="input" name="input" ng-pattern="emailPattern" /><br>
         <p>Input is valid? = {{form.input.$valid}}</p>
  </form>
</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

Building a straightforward RESTful API for user authentication with Node.js, MongoDB, and Express.js

Can someone provide guidance on creating a RESTful API using Node.js, Express.js, and MongoDB? Specifically, I am looking for assistance with writing the schema for login and sign up pages, as well as comparing data in MongoDB using Node.js Express.js. As ...

Dealing with unique constraint violation in Mongodb when using insertMany

Currently, I'm in the process of working on a project that involves using node.js and mongodb version 5. In my collection, I have implemented a unique index for the Parcel property. However, during testing, an error is triggered: MongoBulkWriteError: ...

The child component is set to auto scroll without affecting the parent component

Check it out here: https://jsfiddle.net/wh6r4ybe/42/ const historyEndRef = useRef(null); const scrollToBottom = () => { historyEndRef.current.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { scrollToBottom(); }); I am trying to a ...

Using target="_blank" does not seem to open a popup window in React

The issue is that the target="_blank" attribute is not working properly for the modal popup window. Instead, the link is opening in the same page and the popup is closing. <TermLink to="/legal/privacy-policy" target="_blank"> Privacy Pol ...

Exploring the srcObject feature in React NativeDiscovering the ins and

I am currently working with react native web technology. React-Native-Web: https://github.com/necolas/react-native-web One of the requirements is to incorporate a Video tag. I have developed a video component using CreateElement. Here is the video compo ...

Controlling ever-changing routes using AngularJS

My AngularJS app (Angular v1) has a secure login system in place. Users who are not authenticated can only access the login page, forgotten password page, and cookie policy. I am utilizing ngRoute as shown below: $routeProvider .when('/login ...

Leveraging the local variables within a function in conjunction with the setTimeout method

Currently, I'm facing an issue with a website that I'm working on. I have created a function that should add a specific class to different ids in order to make images fade out one by one on the home page. To streamline the process, I used a local ...

Generating a fresh object derived from an existing object without saving any modifications

I am facing an issue with using an Array to store boilerplate objects that can be copied, modified, and added to another Array. The problem arises when the new Array takes ownership of the object, causing changes to persist in the original object. For exa ...

What is the best way to retrieve the current state from a different component?

My goal is to access a user set in another component. I passed the state from the highest component (which is the app) by utilizing this function for state change. handleRegisterSubmit(e, username, password) { e.preventDefault(); axios.post('/au ...

Observing a global object's attribute in Angular JS

Imagine you have an object in the global scope (yes, I know it's not ideal but just for demonstration purposes) and you wish to monitor a property of that object using Angular JS. var person = { name: 'John Doe' }; var app = angular.mod ...

Carousel position images off-center to the right on smaller screens

I created a fullscreen slider using the carousel bootstrap feature. However, when the screen size shrinks, the background image resizes and centers itself. Instead of centering the image on smaller screens, I want it to focus on the right side. Here is ho ...

arrange items based on their category into arrays

I have a JSON file that needs to be arranged based on three specific fields. Here is an example snippet of the JSON data: { "Racename": "10KM", "Category": 34, "Gender": "Male", "Work": "Google", "FullName": "Dave Happner", "Rank": 1, "Poni ...

What is a way to transfer an Object from one Vue.js component to another without relying on vuex?

Using vue-router in app.vue, I defined the two components as shown below: <div class='app'> <div class='nav'> <router-link to='/a'>to A component</router-link> <router-link to= ...

Facing issues with Heroku and Express/Nodejs crashing?

I have been working on a React/Express application that I am attempting to deploy on Heroku. While trying to do so, I encountered the following errors in my logs: 2020-01-13T03:39:48.733455+00:00 heroku[router]: at=error code=H10 desc="App crashed" method ...

When there is no content in the responseText, AJAX will display an error

I've encountered an issue while trying to fetch data using AJAX. The problem lies in receiving an empty responseText. Here's the code I'm working with: JavaScript: function getFounder(id) { var founder = ""; $.ajax({ ...

Hide modal once form has been successfully submitted

Is it best practice to pass handleClose into ForgotPasswordFormComponent in order to close the modal after form submission, or is there a better way to achieve this? <StyledModal open={openModal} onClose={handleClose} closeAfterTransition slots={{ bac ...

Using a jQuery UI accordion with a numbered list

As part of my company's user documentation, I am trying to integrate jQuery UI components into our HTML output. Despite my limited experience with JavaScript, I was able to get the accordion feature working for table rows. However, I am now facing dif ...

Using Typescript to implement a conditional return type and ensuring that the value types are consistent together

I am working with a useSelectedToggle hook that helps in connecting the UI state to the open/closed status of a dialog where it will be displayed. The toggle defines the value as (T) when it is open, and null when it is closed. How can I enforce stricter ...

On initial load, React router switch fails to find a match

I am encountering an issue with my switch and react-router. Whenever I open a new tab and navigate to any path, it always redirects me to /login. However, if I remove the bottom switch (the one without a path - the default), everything works as expected. A ...

A guide on utilizing Puppeteer for capturing screenshots of web pages with embedded videos

Currently, I am using Puppeteer to access a website and capture a screenshot of a video. Unfortunately, the default Chromium browser that Puppeteer uses does not support certain video types. I have managed to get it working by launching Puppeteer with a l ...