To display an alert when input email contains "@" and submit button clicked

Question

I would like that the code below show an alert when an input email contains both "@" and ".com" when the submit button is clicked.

Currently, the alert is not showing up. Not sure whether the error has to do with the submit button or not.

  function myFunction() {
    const email = document.getElementById("e").value;
    var button = document.getElementById("s").onclick;

    if (email.includes('@') && (button.clicked == true)) {
      alert("Thank you for subscribing!");
    } else {
      alert("Please enter a valid email.")
    }
}

input {
  border: 0;
  padding: 10px;
  font-size: 18px;
}

input[type="submit"] {
  background: red;
  color: white;
  border: solid black;
}

<input type="email" placeholder="Your email" id="e">
<input type="submit" id="s">

See [How to prevent form from being submitted?](/q/3350247/4642212), familiarize yourself with the [DOM API](//developer.mozilla.org/en/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/en/docs/Web/Guide/Events). — Sebastian Simon, Nov 14 '22 at 14:53

node_modules · Accepted Answer · 2022-11-15T07:17:05.607

You are looking in the right direction: "Not sure whether the error has to do with the submit button or not.". There is no such thing as button.clicked and you are not invoking the function. You want to fire the function as soon the person clicks on the button, to do so, you could hook a onclick event/property to the button:

When a user clicks on the button, the function myFunction will be executed. In this function you are using button.clicked which doesn't exist on the Button property. So, your myFunction would look like this:

Example

function myFunction(evt) {
    evt.preventDefault(); // This line will prevent any action such as refreshing the page after submitting the form.
    
    const email = document.getElementById("e").value;

    if (email.includes('@') && email.includes('.com')) {
      alert("Thank you for subscribing!");
    } else {
      alert("Please enter a valid email.")
    }
}

const button = document.getElementById("s");
button.addEventListener("click", myFunction);

And your button:

<button type="button" id="s">Submit</button>

It's not recommended to only check if the user entered something in the input field containing @ and .com only because if I enter @.com it will read as valid. At the end of my answer, I have suggested a post to properly check if a user entered a valid email address using JavaScript.

So, what you want is proper implementation of validating user input, which in this case is the email address.

How can I validate an email address in JavaScript?

Thank you for the suggestion, I have updated my answer accordingly. @HereticMonkey — node_modules, Nov 14 '22 at 14:34

Matias Bertoni · Answer 2 · 2022-11-14T14:37:01.023

something like this?

const email = "email@example.com"

if(email.indexOf("@") !== -1 && email.split('.').at(-1) === "com") {
  //do something
}

edit to illustrate

if indexOf is true, returns the position in the string, if not, returns -1. split breaks the string into two arrays on the char it takes as an argument, and .at(-1) get the last position of the array.

email.indexOf("@") // true returns 5, if not returns -1
email.split(".") // returns ["email@example", "com"]
.at(-1) // get the last position: "com"

score -1 · Answer 3 · answered Nov 14 '22 at 14:25

-1

You need some way of triggering your function and that is currently lacking. The easiest way to approach this is to add an onClick event handler to your submit button and simply remove the logic you have in your javascript to check if the button was clicked.

Also, you are missing a closing bracket on your function definition.

Change your HTML to:

<input type="email" placeholder="Your email" id="e">
<input type="submit" id="s" onClick="myFunction()"

And your JS to:

  function myFunction() {
    const email = document.getElementById("e").value;

    if (email.includes('@'))
    {
      alert("Thank you for subscribing!");
    } else {
      alert("Please enter a valid email.");
    }
  }

This will alert the user the way you intended.

Here's a fiddle containing these changes:https://jsfiddle.net/sz2h8k9v/4/

answered Nov 14 '22 at 14:25

GeirR

58
6

1

Better to use `addEventListener` to attach event listeners. – Heretic Monkey Nov 14 '22 at 14:28
1

Yes, most likely. Although it is not incorrect to use the onClick either. – GeirR Nov 15 '22 at 12:35
2

The [benefits are many and are listed in part on MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#sect1). [There are also many "gotchas" one should be aware of when using `onclick` and other "event handler IDL attributes"](https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-attributes). – Heretic Monkey Nov 15 '22 at 22:10

18jad · Answer 4 · 2022-11-14T14:30:16.137

-1

HTML:

<input type="email" placeholder="Your email" id="email">
<button id="submit">Submit</button>

JS:

// Define global constant that you will be using outside the function
const email = document.getElementById("email"); // dont do .value or it will store the inital empty input value and won't change it
const submitBtn = document.getElementById("submit");

function validateEmail() {
    if (email.value.includes('@')) {
      alert("Thank you for subscribing!");
    } else {
      alert("Please enter a valid email.")
    }
}

submitBtn.onclick = validateEmail;

Note: this is not the best way to check if email is valid, user can have multiple "@" and other things... i suggest using RegEx for this

edited Nov 14 '22 at 14:30

answered Nov 14 '22 at 14:28

18jad

413
3
8

1

Better to use `addEventListener` to attach event listeners. – Heretic Monkey Nov 14 '22 at 14:29
@HereticMonkey of course but i am following his method he used the onclick method in a wrong way, just showing him the correct way – 18jad Nov 14 '22 at 14:31

To display an alert when input email contains "@" and submit button clicked

4 Answers4