CODEWITHSUNDEEP
regexangularjs
Craig Morgan
Craig Morgan

Reputation: 962

write an ng-pattern to disallow whitespaces and special characters

I am trying to get an angular ng-pattern to check that a username has no whitespaces or special characters. The following form return false if you enter whitespaces or special characters. However, it becomes true as soon as you enter a-z, A-z or 0-9. I have tried ng-pattern="/[^\s]+/" and \S and [^ ] but they make no difference.

<form name="myform">
  valid? {{ myform.$valid }}
  <input type="text" name="username" ng-model="username" ng-pattern="/[a-zA-Z0-9^ ]/" required/>
</form>

Here's the form in a plunk: http://plnkr.co/edit/6T78kyUgXYfNAwB4RHKQ?p=preview

Upvotes: 22

Views: 66375

Answers (3)

juan pineda
juan pineda

Reputation: 1

in case anyone needs to disallow user entering emails in the address field

ng-pattern="/^[^@]+$/"

<div ng-messages="vm.updateCC.mailingAddress.$error" ng-show="vm.updateCC.mailingAddress.$touched">
     <p class="validation-message" ng-message="pattern">Please enter a valid address</p>
</div>

Upvotes: -2

Johann
Johann

Reputation: 4373

To surface the specific answer I was looking for, I already had the pattern suggested by Sniffer /^[a-zA-Z0-9]*$/, but angular still appeared to ignore leading/trailing whitespace. As Cristian mentions in the comments:

Angular will trim the input model, meaning that the validation doesn't trigger for spaces. You can add an ng-trim="false" to the input to fix this.

Note that Angular is trying to protect you by silently trimming whitespace by default. In my case, I want the user to be aware that the trailing whitespace is invalid.

Upvotes: 14

Ibrahim Najjar
Ibrahim Najjar

Reputation: 19423

Try the following pattern:

/^[a-zA-Z0-9]*$/

This allows only alphanumeric characters.

Upvotes: 43

Related Questions