Error in custom input box

Create custom HTML5 input box error message

This code will introduce how to use javascript to modify the default validation error message of the input box in HTML5 to help you develop better form validation effects

<form action="">

  <!-- Add the verification js method we wrote -->
  <input type="text" pattern="[a-zA-Z]+" oninvalid="validateIt(this)" oninput="validateIt(this)"/>
  
  <input type="submit" />
</form>

 

/*Javascript code snippet*/

function validateIt(inputelement){
  if(inputelement.validity.patternMismatch){
    inputelement.setCustomValidity('Only letters are allowed');
  }else{
    inputelement.setCustomValidity(''); //The input content meets the validation conditions
  }
  
  return true;
}

 

 

 

 

.