"Exploring ways to implement validation for multiple email addresses in a textarea using JQuery or JavaScript, while allowing the addresses to be separated by semicol

NOTE:

Each email ID must be unique.

An empty string value is allowed to be added.

Email IDs should be separated by semicolons and commas.

Basic validation of email IDs is necessary for entry.

[![

$("#d-notification").focusout(function () {
    var conditions = [".com", ".in", "@"];
    var d = document.getElementById("d-notification").value;
    var res = conditions.some(el => d.includes(el));
    if (d !== "" && res === false) {
        document.getElementById("error-d").style.display = "block";
        $("#generate-dispatcher").attr("disabled", true);
    } else {
        document.getElementById("error-d").style.display = "none";
        $("#generate-dispatcher").attr("disabled", false);
    }
});
#error-d {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <textarea type="text" id="d-notification" class="form__field resize"
   placeholder="Enter the Email ID"></textarea>
 <span id="error-d" class="error-noti">Please Enter valid Email ID</span>
</div>

]1]1

Answer №1

There are two potential solutions to consider here. One option is to create a control using a div and textarea, where entering an email followed by a ";" or "," triggers the creation of a new tag (either a div or span) via JavaScript. Each tag would display the email as a separate item for validation purposes. Alternatively, you could continue validating emails as usual, but first split them by ";" or "," and then validate each email in the resulting array.

Best of luck, Matias Creimerman

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

How Can I Utilize a URL Parameter Twice to Execute SQL Queries in Two asp.DataLists on a Single Page?

I've been trying everything, but I just can't seem to get one query to function properly. My goal is to retrieve information from the SQL Server database in two separate queries - one for album names (based on URL parameter) and another for song ...

Encountering vulnerabilities during the deployment of my React App using NPM has presented a challenge

Just starting out with React Js and seeking some guidance. I've developed a small React app that filters team members based on text input, and it's running smoothly in the development environment when I start NPM. Please review my project and poi ...

Unlock the innerHTML of a DIV by clicking a button with ng-click in Angular JS

I am curious about something. There is a <div> and a <button> in my code. I am looking to access the inner markup of the <div> within the ng-click function without relying on jQuery. Can you give me some guidance? <div id = text-entry ...

Booting up a module in AngularJS without using automatic bootstrapping

Here is the structure of my HTML... <body id="main"> {{pageName}} </body> This is how I implement it in JavaScript: angular.module('myApp',[]) .controller('myController', function($scope){ console.log('initial ...

Retrieve the id of an element from a JSON object

Dealing with quotes, single or double, can sometimes pose a challenge. I am working on a JavaScript function that sends data to a PHP file and receives a JSON response. Everything seems to be functioning correctly, except for the part where I need to out ...

Implementing Axios interceptor is a common practice in Vue.js applications to central

Hello everyone, I'm facing a problem with the interceptor in VueJS. I can't seem to figure out where the issue lies and it's driving me crazy... I've gone through various tutorials and read numerous posts on stackoverflow, but everythi ...

Should Errors be Handled in the Service Layer or the Controller in the MVC Model?

Currently, I am in the process of developing a Backend using Express and following the MVC Model. However, I am uncertain about where to handle errors effectively. I have integrated express-async-errors and http-errors, allowing me to throw Errors anywher ...

Dealing with Issues in Projectile Image Display: Solutions for Resolving the Error

I've been attempting to change my projectile from circles to images, but I'm encountering this error File "C:\Users\Habib\Desktop\PYTHONGGAME\py.py", line 353, in <module> bullets.append(projectile(round(player ...

Issue: Troubile in fetching CSS file from CDN and using local copy as fallback, What is the solution?

I previously inquired about this issue, however, I did not receive a satisfactory solution. Therefore, here I am asking again for your assistance. I am attempting to retrieve my CSS from an external CDN service, such as http://cdn.example.com/. This scrip ...

Remove the initial DIV element from the HTML code

I have created a unique chat interface by combining JScript, php, and jquery. The chat messages are saved in an HTML document that gets displayed in the text area. Each user input message is contained within its individual div tag: <div>Message</ ...

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

Generate star icons dynamically within a div using C# and MSSQL data to determine the number of stars

Upon retrieving a rating (which can be more than 5) from the database, I aim to dynamically generate glyphicon stars based on the received value when the page loads. The code snippet below demonstrates how the value is retrieved: int rating_count = DBinte ...

JavaScript validation controls do not function properly when enabled on the client side

Following the requirements, I have disabled all validation controls on the page during the PageLoad event on the server side. When the submit button is clicked, I want to activate the validations and check if the page is valid for submission. If not, then ...

I am in need of a customized 'container' template that will display MyComponent based on a specific condition known as 'externalCondition'. MyComponent includes the usage of a Form and formValidation functionalities

container.html <div ngIf="externalCondition"> <!--Initially this is false. Later became true --!> <my-component #MyComponentElem > </my-component> <button [disabled]= "!myComponentElemRef.myDetailsF ...

Using jquery to remove textbox value when checkbox is unchecked

I have a single datatable created using jQuery. The first column of the table consists of checkboxes, and the last column contains textboxes. Because these elements are generated dynamically, they end up having identical IDs and names as shown below: $ ...

Exploring the world of JSON manipulation in JavaScript

I've been experimenting with JSON recently and came across something I don't quite understand. Here is an example of some code I used: var str = "{'name':'vvv'}"; var cjson = eval ("(" + str + ")"); alert( ...

Challenges with Hangman in JavaScript

As a beginner in JavaScript, I recently developed a simple hangman-like game. However, I encountered some challenges that I need help with. One issue is related to my lettersGuessed array. Currently, the array displays every time a key is pressed and repea ...

When working with a set of objects, consider utilizing jQuery's InArray() method to effectively handle

Within my Javascript code, I am working with an array of Calendar objects. Each Calendar object contains an array of CalendarEvent objects. Every CalendarEvent object holds properties for Date and Name. I am looking to determine if a specific date exist ...

Unable to activate the date range picker

I am having trouble with integrating the daterange picker on my webpage. I can't seem to get it to work properly. Can anyone help me figure out what I might be doing wrong or if there's something missing? CSHTML: <div class="has-feedback" &g ...

Merge arrays values with Object.assign function

I have a function that returns an object where the keys are strings and the values are arrays of strings: {"myType1": ["123"]} What I want to do is merge all the results it's returning. For example, if I have: {"myType1": ["123"]} {"myType2": ["45 ...