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

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

<body>
<h1>HTML DOM Events</h1>
<h2>The onm ousemove Event</h2>
<input  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">
<script>
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 = "";
  }
}
</script>
</body>
</html>

CodePudding user response：

You have to 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

does this solve your problem?

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  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" >

CodePudding user response：

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.

CodePudding user response：

$(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <label for="texte">Ecrivez dans le champ : </label>
        <input type="text" id="texte" name="nom">
      
       <div   id="textezz"></div>