使用Javascript将我的html输入限制为仅文本，并以其他方式提醒用户？

Question

So basically I have created input fields in HTML for a persons first and last names. I want this field to limit their inputs to only text and give them an alert otherwise using vanilla JS please.

Here is the HTML code:

<div>
        First Name:<br> <input id="name" type="text" placeholder="Type Here" pattern="[A-Za-z]"><br>
        Last Name:<br> <input id="name" type="text" placeholder="Type Here" pattern="[A-Za-z]">
</div>

As you can see I previously tried to limit the input by using the pattern="" method I saw in another post but couldn't get it to work. Advice on that would be much appreciated as well.

And here is my JS function as it stands now:

var nameinput=document.getElementById('name').value;
var input=function(field){
    if(isNaN(field)===false || field===""){
        alert('Please Enter Your Name');
        return false;


    }
}
input(nameinput)

It's probably something obvious. I'm pretty new to JS but any help would be greatly appreciated!

Answer 1

If you want it to check all the time, try to implement a custom onChange callback ie <input type="text" name="firstName" onChange="verif()"> , or, if you want it to verify only at submit time, add onSubmit="verif()" to your form. For both case the verif() function looks like

function verif(){
  var firstName = document.getElementByName("firstName")[0].value;
  if(!firstName.match(/[\A-Za-z]+/i)) {
    alert("You can only enter characters");// Or whatever message
    document.getElementByName("firstName")[0].focus();
  }
  var lastName = document.getElementByName("lastName")[0].value;
  if(!lastName.match(/[\A-Za-z]+/i)) {
    alert("You can only enter characters");// Or whatever message
    document.getElementByName("lastName")[0].focus();
  }
}

By the way, this code assume that you use the name property with your inputs, which you should alway use with inputs. You also shouldn't use two time the same id.