Display warning message when typing numeric value

Question

I have a form that receives a single value. When the user enters the value 100.000 (hundred thousand) for example, I want it to load a warning message just below the input.

"Value below permitted value".

const ValorImovel = document.querySelectorAll("#ValorImovel")

function MontaAlerta(event) {
  // var numb = "100";
  if (event === 100) {
    console.log(event.value)
  } else {
    console.log('error')
  }
}

window.addEventListener("keyup", MontaAlerta)

<form>
  <div class="centered-form">
    <div class="preco-item">
      <input id="ValorImovel" name="ValorImovel" class="form-control input-form" placeholder="R$ 0" type="text" />
    </div>
  </div>
</form>

Answer 1

If you want to restrict the value to be entered to say R$ 100,00 (or any other value), you must compare the content of the input with 100 (or the desired value) and display the alert. In the case below, I’ve pasted a spanwith the id alerta which is filled in with the Valor inválido. If the value is greater than 100, the content of span is removed.

const ValorImovel = document.querySelectorAll("#ValorImovel")

function MontaAlerta(event) {
  // var numb = "100";
  if (event.target.value <= 100) { //o valor atual é menor ou igual a 100?
    document.getElementById('alerta').innerHTML = 'Valor inválido'; //mostro o alerta
    console.log(event.target.value)
  } else { //valor acima de 100
    console.log('error')
    document.getElementById('alerta').innerHTML = ''; //limpo o alerta
  }
}

window.addEventListener("keyup", MontaAlerta)

<form>
  <div class="centered-form">
    <div class="preco-item">
      <div>
        <input id="ValorImovel" name="ValorImovel" class="form-control input-form" placeholder="R$ 0" type="text" />
      </div>
      <span id="alerta"></span>
    </div>
  </div>
</form>

Remember that in this case, the only processing is to warn that the value is invalid, but still, any value is being accepted, so further processing must be done.

I also suggest you use a input of the kind number with the attribute min="100" which will instruct the browser to restrict the range of values accepted in the example:

<form>
  <div class="centered-form">
    <div class="preco-item">
      <div>
        <input id="ValorImovel" name="ValorImovel" class="form-control input-form" placeholder="R$ 0" type="number" min="100"/>
      </div>
      <button type="submit">Enviar</button>
    </div>
  </div>
</form>

In the above case, the browser itself will take care to refuse lower values than 100, the downside is that the feedback will only exist at the time of submission, but you can match the event of keyup.

Answer 2

First mistake is in the first line:

const ValorImovel = document.querySelectorAll("#ValorImovel")

document.querySelectorAll() returns list of elements present in the document that match the specified selector group.
That is, its variable ValorImovel is a reference to a NodeList and not to the desired element. If you want to find the reference to an element by your id use the method document.getElementById().

Along those lines:

window.addEventListener("keyup", MontaAlerta)

You set as target the object window represents the window, which implies that this Thinker will listen to all events keyup fired and if you add other inputs to your code it would be very laborious to distinguish and work who triggered the event.
Therefore set the event listener directly at the event target.

The definition of the function MontaAlerta() seems unnecessary because it clearly has the purpose of treating an event so it can be rewritten as a function expression by defining the listener of the event keyup.

Another thing missing is check if the input value is decimal valid.

Also missing comply with the requirement a warning message just below the input that a style with pseudo element ::after well positioned can meet.

const ValorImovel = document.getElementById("ValorImovel")

ValorImovel.addEventListener("keyup", function(e) {
  if (!this.value.match(/^-?\d+(.\d*)?$/)) {
    this.parentElement.classList.add("errado");
    return;
  } else {
    this.parentElement.classList.remove("errado");
  }
  if (parseFloat(this.value) < 100) {
    this.parentElement.classList.add("abaixo");
  } else {
    this.parentElement.classList.remove("abaixo");
  }
});

.abaixo::after {
  display: block;
  content: "Valor a baixo do permitido";
  color: orange;
}

.errado::after {
  display: block;
  content: "#ERRO: Valor inválido!";
  color: red;
}

<form>
  <div class="centered-form">
    <div class="preco-item">
      <input id="ValorImovel" name="ValorImovel" class="form-control input-form" placeholder="R$ 0" type="text" />
    </div>
  </div>
</form>

Answer 3

Inside the function use: "Event.target.value" to obtain the input value;

ex:

function MontaAlerta(event) {
// var numb = "100";
if (event.target.value === 100) {
 console.log(event.target.value)
} else {
 console.log('error')
}