Search a String in an Input Forms

Question

I’m trying to search a string using Javascript inside my form, but I couldn’t find a method to do it. For example, I have my form with the "email" field and would like to search the domain typed by the user. I tried to use the indexOf() and the includes(), but I did not succeed, someone could give me a light on how I can solve this problem using Javascript/jQuery?

My HTML code:

<div class="container">
    <div class="h1">Cadastro</div><br />
    <form id="formulario" method="get">
      <label for="nome"><b>Nome Completo</b></label>
      <input type="text" placeholder="Insira o nome" name="nome" id="nome" required>

      <label for="tel"><b>Telefone</b></label>
      <input type="text" placeholder="Insira o telefone" name="telefone" id="telefone">

      <label for="email"><b>E-mail</b></label>
      <input type="text" placeholder="[email protected]" name="email" id="meu-email" required>

      <label for="data"><b>Data de nascimento</b></label>
      <input type="text" name="data" id="data">

      <input type="submit" name="event" value="Enviar" class="btncadastra" />
    </form><br />
  </div>

  <script src="cadastro.js"></script>
</body>

My Javascript code:

var form = document.getElementById('formulario')
var campo = document.getElementById('meu-email')

form.addEventListener('submit', function () {
    if (campo.toString().includes("gmail.com")) {
        alert('é gmail!')
    } else {
        alert('não é!')
    }
});

Answer 1

When you use methods like document.getElementById, you will receive some DOM element. In case you select a <input />, the returned element will implement the interface HTMLInputElement.

Note that you are trying to access the value of input (what the user typed) through the method toString. However, see what this method actually returns:

const field = document.getElementById('my-field');

console.log(field.toString()); // "[object HTMLInputElement]"

<input type="text" id="my-field" value="Foo" />

Therefore, we contact that the toString will not return the value entered by the user, but rather the textual representation of the object to which it is attached - in this case, HTMLInputElement.

To access the field value, use the property value. Thus:

const field = document.getElementById('my-field');

console.log(field.value); // "Foo"

<input type="text" id="my-field" value="Foo" />

From this, you can use methods such as String.prototype.includes to check if the email typed is from a specific domain. The same problem was only the toString, that should be value. Behold:

var form = document.getElementById('formulario');
var campo = document.getElementById('meu-email');

form.addEventListener('submit', function (event) {
    event.preventDefault();
    
    if (campo.value.includes("@gmail.com")) {
        alert('É Gmail!');
    } else {
        alert('Não é!');
    }
});

<form id="formulario">
    <input type="email" id="meu-email" />
    <button type="submit">Enviar</button>
</form>

^{Note, as a detail, that I used the method Event.preventDefault to prevent standard form submission - since we are using Javascript to manipulate it.}