JSFiddle - React, Tailwind, and code Playground
HTML
<form method="get">
<div class="inputWrapper">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Name" onChange="checkName(this)" >
</div>
<div class="inputWrapper">
<label for="age">Age</label>
<input type="number" id="age" placeholder="Age" min="0" max="150">
</div>
<div class="inputWrapper">
<label for="location">Location</label>
<input type="text" id="location" placeholder="Location">
</div>
<div class="inputWrapper">
<button type="submit">Submit</button>
</div>
</form>
CSS
.inputWrapper {
margin: 10px 0;
}
label {
display: block;
font-weight: bold;
}
input {
display: block;
}
JavaScript
function checkName(input) {
// Check if input contains a digit
if (/\d/.test(input.value)) {
alert('Name contains a number');
// Remove all digit characters
input.value = input.value.replace(/\d/gi, '');
}
// Check if input is empty
if (input.value === '') {
alert('Name is empty');
}
return true;
}