Disallow use of @ character in html5 input fields-Tech Notes

Disallow use of @ character in html5 input fields

Technical otaku 2022-02-18

0 2036 0

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>
<html>
<body>
  <form id="my-form">
    <input type="text" id="myInputID">
    <button type="submit" onclick="submit()">Submit</button>
  </form>

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

  </script>
</body>
</html>

uj5u.com enthusiastic netizens replied:

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

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

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

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

Nevertheless, this still allows pasting @Input field form.

Technical otaku

Sought technology together