Custom Error Messages on an HTML5 Contact Form

I want to add custom error messages to a contact form that I made, with HTML5, and have been able to do so; however, I am having an issue with this in regards to valid form submissions: though I can get the custom messages to prompt on their qued error, those same message are also triggered upon a form submission where an input fields validation criteria has been met. Below, you will find associated code that I used for one of these messages to which I refered, above; what can be going on here?:

<label>Name
<input required id="name" name="name" placeholder="Name" tabindex="1">
</label>

<Script>
var nError= document.getElementById("name");
nError.checkValidity(this)
{
if(nError.validity.valueMissing)
{
nError.setCustomValidity("You need to leave your name, here.");
}
};
</Script>

 

Try this:

var nError= document.getElementById("name");
nError.checkValidity(this)
{
if(nError.validity.value == '')
{
nError.setCustomValidity("You need to leave your name, here.");
}
};

Code (markup):

https://jsfiddle.net/twnLfmjz/7/