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><labelfor="name">Name</label><inputid="name"name="name"placeholder="Enter Your Name"type="text"requiredautocomplete="off"></form>