Am new on Angular.Need to restrict special characters into input box with angularjs
HTML code:
<input type="text" class="form-control" id="cntry" ng-model="address.countryCode">
Allow only alphabets or digits
You can try this solution by adding pattern:
<input type="text" class="form-control" id="cntry"
ng-model="address.countryCode" pattern="^[a-zA-Z0-9]*$}">
Define a regex in your controller
$scope.regex = /^[^`~!##$%\^&*()_+={}|[\]\\:';"<>?,./1-9]*$/;
And in your html use a ng-pattern directives and pass the above regex as pattern.
<input type="text" class="form-control" id="cntry"
ng-model="address.countryCode" ng-pattern="regex">
For more info visit Restrict Special Characters in HTML & AngularJs
Related
I use HTML5 patter to validate address field input. Here is example of my code:
<input class="form-control" type="text" name="address1" id="address1" value="" maxlength="40" required>
I would like to use pattern attribute to prevent PO box in the address field. Can anyone help me achieve that with patter regex?
Use a pattern with a negative lookahead. See Regular expression to match a line that doesn't contain a word and replace the word in those patterns with the pattern that matches box followed by a number.
.*(?![Bb][Oo][Xx]\s+\d)
<form>
<input type="text" pattern="((?![Bb][Oo][Xx]\s+\d).)*">
<input type="submit" value="Submit">
</form>
Following JavaScript & regex : How do I check if the string is ASCII only?
how do I use the ASCII-only regex (/^[\x00-\x7F]*$/) in pattern attribute in HTML?
I wish to restrict the user input to only ASCII characters.
<form class="row" name="marketDetails">
<input type="text" class="form-control col-md-12 form-sm" name="name" id="name" placeholder="Name"
value=""
maxlength="50"
pattern="[\x00-\x7F]"
ng-model="vm.marketMetaData.market_name" required/>
</form
Using pattern="[\x00-\x7F]" still lets me use non-ASCII character (e.g ¶) without any error in the form
Thanks.
Use pattern="[\x00-\x7F]+" - that did the trick. thanks!
by Wiktor Stribiżew
I want to validate below input with Alphanumeric and ()._-‘ symbol only.
<input type="text" name="companyName" value="" pattern="[A-Za-z0-9()._-‘]+" title="Alphanumeric with symbols ()._-‘ only" required> </p>
But, when I try the input, only ._‘ can be used, ()- are not working.
You need to escape those characters. They have significance in RegEx and aren't treated as part of the expression. Try the following: [A-Za-z0-9\(\)._\-‘]+
Works fine for me, with the exception of the '-' which probably needs to be first:
[-A-Za-z0-9()._‘]
Try the code below. I don't know why, but the order for the pattern attribute matters.
<form>
<input type="text" name="companyName" value="" pattern="[A-Za-z0-9()_.'-]+" title="Alphanumeric with symbols ()._-‘ only" required>
<input type="submit">
</form>
i have a text field for email which is set to required, i want it to show a text that you need to include "#" on your email. like how it displays "fill out this field" when you pressed the button without typing anything on the field. How can i do it? Thanks.
EXAMPLE:
<input type="text" name="email" required>
You can try to use the type in case you are using HTML5 as:
<input type="email" name="email" required>
If you are not using the HTML5 then you need to use some scripting language like Javascript to check the validity. For example in Javascript it would be like:
if(!document.getElementById("email").checkValidity())
In case of PHP it would be like
if (filter_var($email, FILTER_VALIDATE_EMAIL))
You can check it by using (since HTML5):
<input type="mail" name="email" required>
It will display a warning if format is not correct (tooltip, or red color around the field, depending on your browser.
Or you can check it on the server side, once you form is sent. For example with PHP, you can use filter_var
Use pattern attribute,
<input type="text" name="email" pattern=".*[#]+.*" />
<input type="email" name="email" required />
More details are at: http://www.w3schools.com/tags/att_input_pattern.asp
I'm using the HTML5 pattern attribute in an <input> to return a match for a specific string: 'felfogtam'
My current markup is:
<input type="text" class="input input-small" pattern="felfogtam">
It does work, but the input is still valid if the field is empty. How can I change the regular expression to not allow a blank field?
Add the required attribute
<input type="text" class="input input-small" pattern="felfogtam" required>
http://jsfiddle.net/bJU2D/