Input validation (JavaScript) using required attribute

I have a problem with input validation using 'patte' and 'required' attribute. The idea is that i want to use my own title, not of the browser. When I want to complete de input with characters that not correspond with the regex (numbers), message 'Only letters allowed' displays near the input. But when I complete with letters it shows me the same message that my characters are incorrect. Who knows want is the problem? Thank you.

<script type="text/javascript">
function validation (textbox) {

var regex = /^[a-zA-Z]+$/;

if (textbox.value == '') {

textbox.setCustomValidity('Required field');
}
else if(!regex.test(textbox.value)){
    textbox.setCustomValidity('Only letters allowed');

}
else {
    textbox.setCustomValidity('');
}
retu true;
}

FORM input:

<input type="text" id="first-name" name="first_name" placeholder="First Name" oninvalid="validation(this);" required="requied" patte="/^[a-zA-Z]+$/"/>