CODEWITHSUNDEEP
javascript
Wanderer
Wanderer

Reputation: 1

How to check if the text is missing a certain character?

The task that I'm working on has an div where you need to input your email. It's a simple task, it only needs to check if the email is missing @ and a period, and then display certain text, nothing too complicated. But, I've tried using the includes() function and the Chrome Console thing displays an error saying that varname.includes() it's not a function.

Here's part of my HTML code where the JavaScript should take place after using onlick:

<div class="warning"> </div>

<div class="email">
  <input class="mail" type="email" name="mail" placeholder="your email">
  <input class="send" type="submit" name="send" value="SEND" onclick="checkEmail()">
</div>

Bascially, what the JavaScript code needs to do is:

  1. If it's missing @, write "missing @" in the warning div.
  2. If it's missing ., write "missing ." in the warning div.
  3. If it's missing both @ and ., write "Your email address is not correct!" in the warning div.
  4. If the email meets both criteria, it makes an alert saying "You are in!"

As I mentioned, I tried using includes() within an if, which didn't work, and I have no clue what else would work here. I know basics like how to make an alert or write text, I just don't know how to make the code check if the characters are there or missing. Any help on this would be greatly appreciated!

Upvotes: 0

Views: 945

Answers (3)

SebastianX
SebastianX

Reputation: 209

I suggest you'd better use regex check against the input email address by the following function:

function validateEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

Upvotes: 0

Faraz
Faraz

Reputation: 443

const toCheckFor = ["@", "."] // Array of all characters to check for
const text = "whatever you want" // text you want to check in
let flag = true // flipped to false if one character in the array not found

toCheckFor.forEach(e => {
   flag &= text.includes(e)
})

Flag will be true if the text contains all characters in toCheckFor.

Upvotes: 2

erosman
erosman

Reputation: 7721

Here is an example based on your post ...

const mail = document.querySelector('input[name="mail"]');  // cache for later use
const warning = document.querySelector('.warning');         // cache for later use

function checkEmail() {
  
  const error = {};
  const text = mail.value;
  
  if (!text.includes('@') && !text.includes('.')) {
    
    warning.textContent = 'Your email address is not correct!';
    return; // end here
  }

/*  
  this is a shorthand
  you can also write 
  if (!text.includes('@')) {
    error.push('missing @');
  }
*/
  !text.includes('@') && error.push('missing @');
  !text.includes('.') && error.push('missing .');

  if (!error[0]) {            // there are some errors
    warning.textContent = error.join(' & ');
  }
  else {                      // no error
    warning.textContent = "You are in!";
  }
}

Upvotes: 0

Related Questions