• notice
  • Congratulations on the launch of the Sought Tech site

Disallow use of @ character in html5 input fields

We have successfully used html5 field validation like this:

<input type="text" title= "This field is required" required>

But for certain fields, we like to disallow certain special characters in fields: @.We tried to use pattern but it didn't work.The code is as follows

<input type="text" pattern= "[^@]" title="Do not allow @" title="This field is required"  required>

Any ideas on how to do this properly.Happy New Years by the way and hope we don't have any coding issues in the new year!

uj5u.com enthusiastic netizens replied:

If you want to prevent users from writing @ characters, please use this code

<!DOCTYPE html>
  <form id="my-form">
    <input type="text" id="myInputID">
    <button type="submit" onclick="submit()">Submit</button>

    var el=document.getElementById("myInputID");
    el.addEventListener("keypress", function(event) {
      if (event.key==='@') {


uj5u.com enthusiastic netizens replied:

@if in the property valueAdd after [^@], then can be disabledwhen submittingusecharacterspattern:

<input type="text" pattern="[^@] "  title="Do not allow @" title="This field is required" required/>
<input type="Submit"/>

Thepattern="[^@] "Mode conversion to ^(?:[^@ ])$Matches one or more characters instead of @From start to finish.

However, if you also want to prevent @ character input, the above code can be enhanced to

  <input type="text" pattern="[^@] "  onkeypress="return event.charCode !==64" title="Do not allow @" span> title="This field is required" required/>
  <input type="Submit"/>

Nevertheless, this still allows pasting @Input field form.


Technical otaku

Sought technology together

Related Topic


Leave a Reply