Is it possible to verify an email address using a "Stealthy Form"?

I am exploring the use of HTML5's type="email" validation to develop a function for validating email addresses.

My goal is to create a form and add an input that has its type set as email. By attempting to submit the form, I aim to determine whether the entered email address is valid or not.

Although my initial approach did not work as expected:

function isEmail (string) {
    var frm   = document.createElement('form');
    var input = document.createElement('input');

    input.setAttribute('type', 'email');
    input.setAttribute('action', 'javascript:void(0)');
    input.setAttribute('value', string);

    frm.appendChild(input);

    // My original attempt didn't yield the desired result
    if ( !! frm.submit() ) return true;
    else return false;
}

Can an email address be validated using this method?

Answer №1

According to https://www.w3.org/TR/html5/forms.html#e-mail-state-(type=email), user agents have the ability to allow users to set a value that is not a valid email address.

This means I would prefer not to rely on this feature.

Additionally, https://www.w3.org/TR/html5/forms.html#valid-e-mail-address provides a regular expression that can be used for checking validity, which is similar to browser validation for email input fields.


If you still want to use a form field for validation, HTML5 offers an API for checking field validity. You can learn more about this at https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api - eliminating the need to submit the form for validation.

I haven't verified browser compatibility for input type=email, but using the regex solution ensures functionality across all browsers, unlike relying solely on HTML5 which might not work in some outdated browsers.

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

Utilizing auto-generated Nonce for Content Security Policy in a Node.js/Express web application

I've exhausted all possible solutions in my attempt to create a nonce and pass it successfully to the CSP and inline scripts with the nonce variable. Despite reading numerous articles, the guidance on accomplishing this task remains vague. Fortunately ...

React 18 doesn't trigger component re-rendering with redux

In my code, I have implemented a custom hook to handle global data fetching based on user authentication. Here is an example of the hook: const userState = useSelector(state => state.user.state) useEffect(() => { if(userState === "authentic ...

Issue with importing React: 'Module not found: Unable to locate'

I've organized my React project with a folder system, as shown in the screenshot below: https://i.stack.imgur.com/Rl9Td.png Currently, I'm attempting to import from context.js, located in src/context.js, into index.js, found in src/components/K ...

Access all the properties of an object within a mongoose record

My database contains a collection of documents that are structured using the mongoose and express frameworks. Each document follows this schema: const userSchema = new Schema({ firstName: { type: String }, lastName: { type: String }, email: { t ...

Learn the process of assigning a value to a dynamically created textbox using JavaScript in code behind

To create a textbox in the code behind, I use the following method: TextBox txt = new TextBox(); txt.ID = "txtRef" + count + dr["DataField"].ToString(); div.Controls.Add(txt); I have been attempting to set the value for this textbox within a jQuery funct ...

Update nested child object in React without changing the original state

Exploring the realms of react and redux, I stumbled upon an intriguing challenge - an object nested within an array of child objects, complete with their own arrays. const initialState = { sum: 0, denomGroups: [ { coins: [ ...

React useEffect not working when using the default state

I'm currently facing an issue where setting the page to its default value from the refresh function does not trigger the useEffect hook on the first attempt. However, if I run the refresh function for the second time, it works fine. Interestingly, thi ...

Transform a JSON array with keys and values into a structured tabular format in JSON

Looking to transform the JSON data below for a Chart into a format suitable for an HTML table: var chartJson = [ { header : '2016', values : [1, 5, 9] }, { header : '2017', values : [2, 4, 8] ...

Display a loading animation before the page loads upon clicking

$("#button").click(function(){ $(document).ready(function() { $('#wrapper').load('page.php'); }); }); <div id="wrapper"></div> <div id="button">click me</div> I would like to display a loading ic ...

Adjust the height of a div based on the font size and number of lines

I'm trying to create a function that automatically sets the height of a div by counting lines. I managed to get it partially working, but then it stopped. Can someone please help me with this? function set_height() { var div_obj=document.getEleme ...

Tips for creating a functional null option using the select ng-options feature

While there are a few questions and answers on this topic, I have yet to find a solution that works for my specific case. Imagine having an object like this: $scope.person = {name: 'Peter', category1: null, category2: null}; Another variable r ...

Adjustable height for text input field

Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...

Navigating with React Router v4 using NavLink to highlight the active route

Currently, I am in the process of transitioning my project from utilizing v3 of react-router to v4 now referred to as react-router-dom. The issue stems from having a MenuBar component that is completely independent of the routing logic. In the previous ver ...

Setting innerHTML does not affect the content of an SVG element

I am currently working on an Angular 7 application and I need to dynamically update the text value based on a dropdown selection. For example, if the id of the text element is 10, then I want to change the text from 'hi' to 'hello'. T ...

Images do not appear on Bootstrap Carousel as expected

I am facing an issue where the images are not displaying on my bootstrap carousel or when I try to display them individually using their class. I am utilizing bootstrap and express for my project. I have verified multiple times that the file path to the im ...

Momentjs initially indicates that the date is valid, logs the correct date, and displays the accurate duration using .fromNow(). However, this suddenly switches

I am currently working on converting the createdAt date in my Nuxtjs application that is fetched from MongoDB using an express app, with the help of moment.js. Initially, when I check if the date is valid, it shows as valid but then it switches to an incor ...

What is the snapping feature of the jQuery Mobile slider?

I've been diving into various sources for the past couple of hours, attempting to implement code snippets claiming to enable snapping functionality on a slider component. I'm facing doubts about the feasibility of achieving this with the jQuery M ...

Tips for ensuring that the horizontal scroll bar remains consistently positioned at the bottom of the screen

There are two div sections on a page, with one positioned on the left and the other on the right. The div on the right contains multiple dynamically generated tags which necessitate a horizontal scroll bar (overflow:auto). This causes the div's height ...

Challenge encountered when attempting to detect multiple submit buttons using jQuery

I am currently attempting to identify which of the four submit buttons was clicked using jQuery 1.7.2. When any one of three specific buttons is clicked, I want an alert box to appear displaying the value of that particular button. Below is the HTML code s ...

Struggling to make addClass and removeClass function correctly for the development of the unique "15 puzzle" game

I am currently in the process of creating a version of "the 15 game" using jQuery in HTML. You can find more information about the game on this page. The objective of the game is to rearrange a table of "boxes" in ascending order from 1 to 15. Below is th ...