Verification and Email Blacklisting Services

I am a beginner in Angular and I am attempting to create a simple blacklist check. Currently, I have two texts that I can toggle between showing and hiding using ng-show. The first text should be displayed when the email pattern is incorrect, and hidden when it is correct and/or on a blacklist.

My issue lies in not knowing how to properly implement the model. Right now, it is mimicked by a checkbox. Any tips or suggestions would be greatly appreciated.

<div class="controls">
  <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
  <input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
<div class="hint">
    <h4 name="mailValidator" ng-if="checked" ng-show="true">Invalid Email</h4>
    <h4 name="checkBlacklist" ng-if="!checked" ng-show="true">Email is not allowed</h4>
</div>

Check out this Fiddle-Demo

javascriptangularjsvalidationblacklist

Answer №1

I have created a JSFiddle to address your issue.

JSFiddle Link

Preview:

<div ng-controller="MyCtrl">
     <input placeholder="Email" ng-model="email" ng-pattern="emailRegExp" ng-class="{ error: !email }" />
     <h4 name="mailValidator" ng-show="!email">Invalid Email</h4>
     <h4 name="checkBlacklist" ng-show="email && inBlackList">Email is not allowed</h4>
</div>

Controller:

function MyCtrl($scope) {
    $scope.inBlackList = false;

    // Retrieving data from the database 
    var bannedEmail = ['<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3f392b0e3f392b603f392b">[email protected]</a>','<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4534322074053432206b343220">[email protected]</a>','<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1d1b095e2c1d1b09421d1b09">[email protected]</a>']

    $scope.emailRegExp = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
    $scope.$watch('email', function(newValue) {
       if(newValue){
           if(bannedEmail.indexOf(newValue) > -1) {
               $scope.inBlackList = true;
           }
           else {
               $scope.inBlackList = false;
           }
       }
   });      
}

Answer №2

When utilizing AngularJS form validation, you have the ability to implement it for the initial text.

<form name="form" class="css-form" novalidate>
    <div class="controls">
      <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
      <input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
    </div>
    <div class="hint">
        <h4 name="mailValidator" ng-show="form.uEmail.$error.email && !onBlacklist">Invalid Email</h4>
        <h4 name="checkBlacklist" ng-show="onBlacklist">Email is not allowed</h4>
    </div>
</form>

In the controller, you can monitor email changes and if it's on a blacklist, set onBlacklist to true. Hopefully, this information proves helpful.

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

Is it possible to save round items within a session?

While utilizing Blocktrail's API for bitcoin wallet management, I encountered an issue with circular references within the returned wallet object. The goal is to store the decrypted wallet in the user's session to avoid password re-entry. Howeve ...

javascriptnode.jssessionexpress

Exploring the World of Browserify Submodules

/xyz /abc.js /abcdef.js /index.js When working with node.js, if you use the require statement for a directory (require('xyz')), it will automatically search for an index.js file within that directory and return the exports defined in that ...

javascriptnode.jsreactjsbrowserify

Protractor can now successfully locate and interact with a nested button element

I am trying to click on the second button, but I can't differentiate between the two buttons using class names. div class="ng-view ff-domain ng-scope"> <div class="hero-unit blur-background ng-scope"> <h1></h1> <h2> ...

javascriptangularjsseleniumselenium-webdriverprotractor

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

javascripthtmlcssshow-hide

Which language is better for refreshing web pages: PHP or Javascript?

May I seek your opinion on this matter? I have the ability to refresh my page using two different methods, but I am uncertain of any potential drawbacks. Can you advise me on which one I should utilize? Edit: Specifically, I am referring to the use of he ...

javascriptphprefresh

Utilizing AJAX and PHP to dynamically update MYSQL database via a dropdown selection

I am currently facing an issue with running SQL queries through AJAX after the selection in a dropdown box changes. I would appreciate any assistance that can be offered. Context My task involves creating a daily calendar for a gym to display all the clas ...

javascriptphpmysqlajax

The active class in the Vue.js component navigation only takes effect after the second click

Within a menu component placed inside a view accessed through its own route (/how-it-works), I am facing an issue with the header component structure, outlined below: <nav class="nav"> <ul class="top-menu"> <li v-for="menu in me ...

javascriptvue.jsroutesvue-componentvue-router

What causes the DateTime value to change when data is passed to a controller action? Exploring the behavior with AngularJS and ASP.Net Web API 2

When transmitting data from the client side to the server side, the two properties of the DateTime type, "ReviewStartDate" and "ReviewEndDate," are changing. These two DateTime properties do not change on the client side, but their values are altered on th ...

c#angularjsasp.net-web-api

Vue-powered carousel having trouble rotating properly

I recently came across a carousel created using vanilla javascript and html. I attempted to convert it to Vue, but encountered some challenges. The carousel is supposed to dynamically pull images from a SharePoint list. However, in my version, the images a ...

javascriptvue.js

Ways to superimpose images

Everything seems to be functioning correctly in my code, but I would like the output images to overlap slightly. This could possibly be achieved using margins, padding, or some other script. Additionally, is there a way to incorporate z-index so that the ...

javascriptjqueryhtmlcsstwitter-bootstrap

What's preventing the mobx @computed value from being used?

Issue: The computed value is not updating accordingly when the observable it is referencing goes through a change. import {observable,computed,action} from 'mobx'; export default class anObject { // THESE WRITTEN CHARACTERISTICS ARE COMPUL ...

javascriptreactjsmobxmobx-react

Steps to Incorporate jQuery Function in a Partial View Inside a Modal

My jquery button click method is functioning correctly in views outside of modals, but the uploadbtn button click method does not work when a partial view is loaded in the modals. <script src="~/lib/jquery/dist/jquery.min.js"></script> ...

javascriptjqueryasp.net-core.net-core

Can someone demonstrate the process of looping through an array of arrays in Angular using various methods?

I am working with an array in my TypeScript file that looks like this: let order : any[] = [ [{order_id:1,order_name:"car"},{order_id:2,order_name:"honda car"},{order_id:3,order_name:"bmw car"}], [{order_id:4,order_name:"honda city car"}], ...

javascriptangulartypescript

Troubleshooting Multer to fix image payload issues in a Node.js and React.js application

Currently, I am facing an issue while trying to send an image from my ReactJS frontend to my NodeJS Express backend using formData. Despite seemingly correct data transmission, the image does not appear in the payload and triggers this error from the backe ...

javascriptnode.jsreactjsexpress

Received an unexpected GET request while attempting to modify an HTML attribute

After clicking a button in my HTML file, a function is called from a separate file. Here is the code for that function: function getRandomVideoLink(){ //AJAX request to /random-video console.log("ajax request"); var xhttp = new XMLHttpRequest( ...

javascripthtmlajaxasynchronous

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

javascripthtmlcss

Sending JSON objects as parameters to WebMethod

I've encountered various errors while passing parameters to my WebMethod. Below are my attempts and the corresponding errors: globalData is an array, mapping is an array that can be deserialized to List<Mapping>, selectedFund is an integer. C ...

javascriptc#json

Tips for updating and transferring a variable within a callback function

I have implemented a function using the SoundCloud API that retrieves a song URL, obtains the associated sound ID from the API, and then passes that ID to a callback for streaming purposes and updating the page. The data is successfully retrieved from the ...

javascriptjquerycallbackscopesoundcloud

Tips for transferring information from a parent to a child controller in Angular using the $broadcast method?

I am trying to send an id argument to a child controller using Angular's $broadcast method, but despite my best efforts with the code below, I can't seem to make it work. Any suggestions on what might be incorrect in my implementation? ParentCtr ...

javascriptangularjs

Occasion that fires prior to the DOM being fully loaded

Is there an event in my Firefox extension that triggers before DOMContentLoaded and allows me to insert HTML while the document is still available? ...

javascriptfirefoxfirefox-addonxul