Javascript: check if word in input is placed after an other word

Question

I have a question but I can't find the answer for my problem. Hope you can help me!

Here's my HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="one">
    <input type="text" id="two">

Here's my Javascript:

$('#one').on('input', function(){
var value = $(this).val();
if (value.includes("@") && value.includes(".com"))
{
   $('#two').focus();
   }
  });

Demo

What this script does
I'm making a login form where the input focuses on the second input when a user has typed his email. In my code: it focuses on the next input when the first input detects an '@' symbol and the text '.com'.

But here's the problem
Lets say your email is: 'john.computer@gmail.com'. My script focuses on the second input after you typed the '@' symbol, because the input already contains '.com' and '@'.

My Question
What javascript do I need to add that checks if '.com' is typed after the '@' symbol?

You probably don't need JS. [HTML5 has very extensive form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). — Andy, Dec 18 '21 at 00:17
how about changing the input type of id #one to type='email' instead of type='text? — Mana S, Dec 18 '21 at 00:27

score 1 · Accepted Answer · answered Dec 18 '21 at 00:27

1

You could use regex: @.*\.com

if (/@.*\.com/.test(value))

answered Dec 18 '21 at 00:27

skara9

4,042
1
6
21

score 1 · Answer 2 · answered Dec 18 '21 at 00:27

You can use indexOf() (docs)

if (value.includes("@") && value.includes(".com") && value.indexOf("@") < value.indexOf(".com"))

I just find both locations and compare them. @ should be found in an earlier index than .com. However, here lies another problem in your code. That is not all emails ended with .com. Here is some solution to solve the problem or you can just use this one

if (value.includes("@") && value.includes(".") && value.indexOf("@") < value.indexOf("."))

score 0 · Answer 3 · answered Dec 18 '21 at 00:33

It sounds like you want to update focus once the user has entered a valid email address. For tips on that, check out the answers to this classic question: What's the best way to validate an email address in JavaScript?

To answer your question more directly, you could create a regular expression (RegExp) to check if .com is typed after the @ symbol.

const comAfterAtSymbol = new RegExp('@.*\.com')
if (comAfterAtSymbol.test(value)) {
  ...
}

Javascript: check if word in input is placed after an other word

3 Answers3