how to check a field without the mouse moving and without validation

Question

Hello I would like to know if it is possible to trigger an event on a form field

For example I have a name field in a form

I would like the error message to disappear when the person starts to fill in the field

But if the person removes the characters the error message comes back

Without any form validation

As you can see on my code for now I check the field on mouseover

function myFunction() {
  const ville = document.querySelector('[name="ville"]');
  if (ville !== null && ville.value !== '')
  { 
    document.getElementById("myImgaa").src = "https://www.w3schools.com/jsref/img_pulpit.jpg";
  } else { 
    document.getElementById("myImgaa").src = "";
  }
}

<h1>HTML DOM Events</h1>
<h2>The onmousemove Event</h2>
<input class="form-control" type="text" name="ville" value="" id="ville" placeholder="" required="required" />
<div style ="width: 200px;
height: 100px;
border: 1px solid black;"onmousemove="myFunction(event)" ></div>
<img id="myImgaa" src="" width="107" height="98">

I have no error message I would like input to be red if empty and yellow if a character in it — pierre, Feb 01 '23 at 09:15
and what about the image? give me more details so i can solve your problem — mmh4all, Feb 01 '23 at 09:18
sorry I expressed myself badly I would like the image to be displayed if a letter in the input field and the field turns yellow if no letter in the input then no image and input in red — pierre, Feb 01 '23 at 09:20

score 1 · Answer 1 · answered Feb 01 '23 at 08:58

You can try and bind to the keypress event for the element:

const ville = document.querySelector('[name="ville"]');
ville.addEventListener("keyup" , myFunction);

The above would need to be outside of your function. An event object will be sent to your function, e.g.: myFunction(e){} You an also use keyup or keydown events.

mmh4all · Accepted Answer · 2023-03-07T10:53:56.113

You can use input event which occur whenever you type in or delete charachter, for example if you type ABC this event will trigger 3 times

alternatively you can use change event which occur when the value changed, for ABC this will trigger once you leave the input

to know the difference between both events you can check out this link Difference between "change" and "input" event for an `input` element

by default i hide the image with display: none; css property and once you type in i remove this class so the image will appear

const inputEl = document.querySelector("#ville"),
      img = document.querySelector("#myImgaa");

inputEl.addEventListener("input", () => {
  if (inputEl.value == "") {
    inputEl.classList.add("red");
    inputEl.classList.remove("yellow");
    img.classList.add("d-none");
  } else {
    inputEl.classList.add("yellow");
    inputEl.classList.remove("red");
    img.classList.remove("d-none");
  }
});

.red, input {
    border: 2px solid red;
    outline: red;
}

.yellow {
    border: 2px solid yellow;
    outline: yellow;
}

/* Hide an element */
.d-none {
    display: none;
}

<input class="form-control" type="text" name="ville" value="" id="ville" placeholder="" required="required" />
<div style ="width: 200px;
height: 100px;
border: 1px solid black;" ></div>
<img id="myImgaa" src="https://www.w3schools.com/jsref/img_pulpit.jpg" width="107" height="98" class="d-none">

Thank you very much for this code and the explanation But if I have several inputs I have to duplicate the code — pierre, Feb 01 '23 at 10:03
you don't need to duplicate you can use arrays instead and loop through it, and give your input elements a css class so you can select them all with document.querySelectorAll and do the same for each one — mmh4all, Feb 01 '23 at 10:05

score 0 · Answer 3 · edited Feb 03 '23 at 18:31

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $("#texte").keyup(function(){
    const nom = document.querySelector('[name="nom"]');
    
    if (nom !== null && nom.value !== '')
    { 
      document.getElementById("textezz").innerHTML="le champ n'est plus vide";
      $(this).css("background-color", "lightBlue");
    } else { 
      document.getElementById("textezz").innerHTML="vous devez remplir votre nom";
      $(this).css("background-color", "yellow");
    }
  });
});
</script>

<label for="texte">Ecrivez dans le champ : </label>
<input type="text" id="texte" name="nom">

<div id="textezz"></div>

how to check a field without the mouse moving and without validation

3 Answers3