Change Default Html Input Validation Message

I want to override the error messages by e.g. Firefox for my HTML5 form with my own personal message. But doing this causes the input field I am applying it to to not allow the for

Solution 1:

You can use the input and invalid events to set your custom validation message.

let name = document.getElementById("name");
name.addEventListener("input", function(e){
  name.setCustomValidity('');//remove message when new text is input
});
name.addEventListener("invalid", function(e){
  name.setCustomValidity('Please enter your full name');//custom validation message for invalid text
});

<form>
  <label for="name">Name</label>
  <input id="name" name="name" placeholder="Enter Your Name" type="text" required autocomplete="off">
</form>