Is it feasible to switch the classList of a form element that also has an event listener attached to it?

While I don't have a specific code snippet to share, I did have an idea and attempted to implement it. Unfortunately, it didn't yield the desired results.

const validateEmailAddress = function (e) {
  const regex =
    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
  e.preventDefault();
  if (!regex.test(inputEmail.value)) {
    this.classList.toggle(".error");
  } else {
    return (inputEmail.value = "");
  }
};

form.addEventListener("submit", validateEmailAddress, false);

Answer №1

Get rid of the period . from the class identifier:

form.classList.toggle("error")

This simple adjustment should do the trick.

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

Search through a JSON array to find a specific element and retrieve the entire array linked to that element

Recently, I've been working with a json array that dynamically increases based on user input. Here's a snippet of the json code I'm dealing with: [{"scheduleid":"randomid","datestart":"2020-06-30",&quo ...

Retrieving extra data from JSON

Instead of just returning a success status in the JSON response from the controller, I would like to also include the person's name. Currently, the JSON response indicates whether the operation was successful and uses JsonRequestBehavior.AllowGet. T ...

How can we style the <a> link once it has been downloaded?

Is there a way to change the color of a download link after it has been clicked on? I've attempted using the visited attribute, but it only seems to work with regular links and not with download documents: Appreciate any help ...

Tips for eliminating the border on a Twitter widget

Looking to integrate a Twitter widget into my website. The site is built using Smarty and I want to customize the widget. Currently, there is a scroll bar on the right section that I would like to remove by adding a style overflow:hidden to the class strea ...

Graphic descending within container

Struggling to design some divs for image display, I encountered a problem where the image shifts down by 3 pixels. It seems this is due to a 3 pixel margin on the container div, but I'm puzzled as to why it affects the image position. padding:0; marg ...

Discover the default text highlighting color of a browser with the use of JavaScript or Dart programming

Did you know that you can change the browser's default text highlight (selection) background color using CSS? For example: ::selection { background: #ffb7b7; } Find out more about the browser/OS specific default background color when selecting tex ...

What advantages does using `prestart` offer compared to `&&` in a command within `package.json`?

I believe the title speaks for itself, but let's dive in: What advantages does using the pre-script of npm package.json, like prestart, have over simply combining commands with && in the start script? { prestart: "parcel build", start "n ...

Alignment of Bootstrap responsiveness shifted to the left rather than the center

My HTML Code: <div class="gridrow" id="eventsrow"> <div class="gridcard" id="eventcard" style="float:left;width:100%;height:100%;margin-bottom:0.5rem;background-color:white"> <div class="event container"> <div clas ...

What are some effective methods for maintaining the integrity of HTML content?

Attempting to safeguard HTML content generated in a specific location by powerMTA. Here is the code snippet of the HTML content. Content-1. <html>=0A<body>=0A<table style=3D"max-width:576px;font-family:Arial, Helvet= ica, sans-serif;&q ...

Troubleshooting: Why is the AngularUI Modal dialog malfunctioning

I'm currently working on integrating an angularUI modular dialog into my application. Here is a snippet from my controller.js file: define([ 'app' ], function(app) { app.controller('TeacherClasses', [ '$scope', &apo ...

Using the Mongoose $or operator with a nested array in query conditions

Here are the schemas I am using: //ProjectModel const ProjectSchema: Schema = new Schema( owner: { type: Schema.Types.ObjectId, ref: "User" }, users: [{type: Schema.Types.ObjectId, ref: "ProjectUser", unique: true }] ); //Project Use ...

Ways to modify the color of cells in a table generated from JSON

In developing an HTML table based on JSON data, I have created a university semester map that displays student information including their ID, year, term, and required courses for graduation. While the table is successfully created, I aim to customize the ...

The IE9 confirmation dialog fails to pause for user response, resulting in automatic postback before user input is received

Behind the Scenes btnNext.Attributes.Add("onclick", " return Verification(this,'" + GetLocalResourceObject("message").ToString() + "'); ") .ASPX Page [Within javascript tags] function Verification(source, message) { var dialog = '< ...

I'm looking to add autocomplete functionality to a text input in my project, and then retrieve and display data from a MySQL database using

Looking to enhance user experience on my form where users can select inputs. Specifically, I want to implement a feature where as the user starts typing in a text input field with data from a MYSQL database, suggestions will be displayed. The form is locat ...

Storing information in an array with automatic ID generation_incrementing

Here is an array in a specific format, however, there is no "ID" field available when the form is submitted. The requirement is to have an auto-generated ID assigned and saved in a JSON Array upon user submission of the form. With each form submission, t ...

Problem with the overflow setting of a specific div

My website is currently hosted on a test server at medexcel.comeze.com. However, I am encountering an issue where the overflow of the top div is no longer hidden when I hover over a menu button in the top bar. This results in the bottom right corner of th ...

Having trouble establishing a connection between MongoDB Atlas, NodeJS, and Mongodb

Encountering an issue while attempting to establish a connection with MongoDB. The error seems to be related to the 'connect' keyword itself. I am unsure of what the exact problem is. The error message displayed is as follows: mongodb.connect( ...

Unable to hide the mobile menu button

https://i.sstatic.net/5rdYY.pngI am currently working on a fun website project . I am facing an issue with the mobile menu button not disappearing using display:none in Safari on my iPhone when in landscape mode, even though it works fine in Chrome. My g ...

step-by-step guide for resolving issues with downloading files in node.js

I've been attempting to download files from my server using node.js with the res.download function from Express, but I keep getting an undefined error. The folder path is D:\program\web\java_script\Node\my_project\ketabk& ...

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

I am encountering an issue where I consistently receive a keyCode of 229 in Android Chrome browsers when running either: <input type="text" (keydown)="testKeyCodes($event)"/> <!-- or --> <input type="text" (keyup)="testKeyCodes($event)"/& ...