使用必需属性

Question

我使用pattern和required属性进行输入验证时遇到问题。我的想法是，我想使用自己的标题，而不是浏览器。当我想用与正则表达式（数字）不对应的字符完成输入时，在输入附近显示消息“仅允许字母”。但是当我写完字母时，它会向我显示我的字符不正确的相同信息。谁知道问题是什么？谢谢。

<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('');
    }

    return true;
}

表格输入：

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