I am trying to validate the email address using a regular expression such that it throws an error if white spaces are added anywhere in the email. The current regex I am using is this:
<input type="email" class="form-control" name="username" ng- model="username" id="email" placeholder="Email" ng-pattern='/^(([^<>()\ [\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' required />
<span ng-show="login.username.$error.pattern">This email format is invalid! </span>
The problem is it allows me to add white spaces in the end. How can I modify it so that if I add a whitespace in the end the error message is fired?
The newest release of angularJs (1.5.7) includes some email address validation improvements.
You can check the commit here.
Line 28 corresponds to the committed regex:
var EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}#)[-!#$%&'*+\/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+\/0-9=?A-Z^_`a-z{|}~]+)*#[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
Below the directive's code you have the tests to validate the regex. It does check for white spaces.
Related
I was wondering how to add in the special character part with brackets like {} [] () and other stuff like " ' - to the unique character I tried below, but for some reason when I add in another of those characters it stops working.
<-- works but does not have any brackets or quotes for special character-->
<form acton = "#">
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!##$%^&*+`~=?\|<>/]).{8,}"
<button>submit</button>
</form>
The part above works but does not have quotes or more special character
Code below has bracket but does not work
<-- does not work (if you do not enter special character user will be able to submit but it does not have any brackets -->
<form acton = "#">
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[~`!##$%^&*()-_=+[]{};:'.,"\|/?><]).{8,}"
<button>submit</button>
</form>
also this did not work (from an answer)
<form acton = "#">
<input type="password" id="pass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!##$%\^&*()\-_=+\[\]{};:\'.,\"\\|/?\>\<]).{4,}">
<button>submit</button>
</form>
I am looking for an answer that makes the bottom part (the one with brackets and all of those special character I included) works.
Since it is regex, all of the characters inside [.....] are allowed, so you should add brackets to there. You can do this with the usage of escape character (because brackets has a role in regex). So just add \] and \[ to the characters allowed inside [.....].
try:
<input type="password" name="pw" pattern="(?=.*?[#?!#$%^&*-\]\[])"
By the way.. I would recommend working with regex cheat sheet, it will help you a lot in validation tasks.
As for your EDIT:
The " and ' needed to be escaped. While \" \' won't work you can use \x27 and \x22 instead, these are the hexadecimal representation of " and ' in the ascii table.
try:
<form acton = "#">
<input type="password" id="pass" required pattern = "(?=.*\d)(?=.*
[a-z])(?=.*?[0-9])(?=.*?[~`!##$%\^&*()\-_=+[\]{};:\x27.,\x22\\|/?><]).{4,}">
<button>submit</button>
</form>
You should escape regex (e.g. \]) characters if they need to be matched during pattern search. Also, refer to the existing answer:
Braces and brackets in passwords
The following works for me, hopefully it should work at your end:
(I merely added escaped characters)
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!##$%^&*+`~'=?\|\]\[\(\)\-<>/]).{8,}">
You're actually very close. The biggest mistakes are:
You should escape some of the special characters inside the character group and you should have hyphen as the last character (otherwise it's a range).
Here is the RegExp you request:
<input type="password" id="pass" required pattern = "(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!##$%^&*()_=+\[\]{};:'.,"\\|\/?><-]).{4,}">
Update: I forgot to html encode the pattern for use directly in html. Now it should work.
I am using HTML5 'pattern' attribute with 'required' for validation of input boxes. HTML5's required attribute works but it can accept spaces and tabs which is not good because user will just put spaces then. I need regex such that it will accepts space and tabs but able to count only character's. Example "ronny jones" this should give 10.
In javascript we do it using something like this, I am looking for similar thing in HTML5
var name = document.forms['contact']['name'].value.replace(/ /g,""); // remove whitespace
if(name.length<6){ // count number of character.
document.getElementById('message').innerHTML="Enter correct Name";
return false;
}
I found one related question to this on SO : Is there a minlength validation attribute in HTML5? but it accepts spaces and tabs, which I don't want.
Below is my code with HTML5 pattern,
<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="[A-Za-z]{6,}" title="Name should have atleast 6 characters." required="" />
I managed a silly hack that does what you asked:
<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="\s*(\S\s*){6,}" title="Name should have at least 6 characters." required="" />
There must be 6 non-space characters for this to pass. so "asdfgh", " abc def " will work, but "abc de" fails.
It DOES NOT work for your comment about "there's a space after Anthony" but as Anthony contains 6 characters, then it's fine? If not, can you clarify further in the question.
To explain how it works:
it takes a pattern of "take 1 non-space character" \S followed by "none-or-more space characters" \s*
you need the pattern to be matched 6 or more times (pattern){6,} i.e. (\S\s*){6,}
then allow non-or-more spaces at the front \s*
If you want to limit the characters allowed to Alpha only, change the \S to [A-Za-z].
Yes, it's a hack IMO as it will be hell to parse internally on long strings. But does the job. You might want to mix with maxlength to limit that as well?
<form action="demo.php">
<input id="name" type="text" pattern="^((?:\s*[A-Za-z]\s*){6,})$">
<input type="submit">
</form>
this will work for your case .. its exacly how you want it. i have set limit of character is from 6 to 40..
I have the following email validation code that uses the ng-pattern directive. I need to include single quotes in the error validation so that for example: asd'f#dfs.com fails. I don't want to use the default angular directive because subsequent .. (dots), ^, commas etc not catered for
<input type="email" name="username" placeholder="jasdf#asdf.com" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern='/^(([^<>()\[\]\\.\,;:\s#"]+(\.[^<>()\[\]\\.,;^:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' required />
<div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$error">
<small class="error" ng-show="userForm.username.$error.required">
Your email is required.
</small>
<small class="error" ng-show="userForm.username.$error.pattern">
Please input a valid email.
</small>
<small class="error" ng-show="userForm.username.$error.maxlength">
Your email cannot be longer than 100 characters
</small>
It can be seen from the above that I'm using the following Regex: ng-pattern='/^(([^<>()\[\]\\.\,;:\s#"]+(\.[^<>()\[\]\\.,;^:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'
My question is how do I include single quotes (') so that it doesn't clash with the ng-pattern tag quotes and also (^) in the Regex. I searched around and it seems I should use &apos but not sure how to implement. Appreciate any help.
You can use this a bit shortened version:
ng-pattern="/^(([^<>()\[\]\\.,;:\s#^\x22\x27]+(\.[^<>()\[\]\\.,;^:\s#\x22\x27]+)*)|(\x22[^#]+\x22))#((\[[0-9]{1,3}(\.[0-9]{1,3}){3}])|(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}))$/"
Here is the regex demo
The changes are:
Three \.[0-9]{1,3} are contracted since it is repeated 3 times to (\.[0-9]{1,3}){3}
The first and second negated character classes now contain \x27 (') and \x22 (") symbols
Also added ^ to the first negated character class
\x22.+\x22 is turned to \x22[^#]+\x22 so that we do not overflow to the domain part and stay within the username part.
I have a simple input field. I want to make sure certain rules are met before submission
The password must:
0. have at least 8 characters
1. have no more than 8 characters
2. have both upper and lower case characters
3. have at least 1 letters
4. have at least 1 digits
5. have one of # # $
6. contain only characters available on a standard English (US) keyboard. List of valid characters
7. not be an old password
My Html Form
<form name="login" action="index_submit" method="get" accept-charset="utf-8">
<ul>
<li><label for="username">Email</label>
<input type="email" name="username" placeholder="username#example.com" required></li>
<li><label for="password">Current Password</label>
<input type="password" name="current_password" placeholder="current password" required></li>
<li><label for="password">New Password</label>
<input type="password" name="new_password" placeholder="new password" required></li>
<li>
<input type="submit" value="Login"></li>
</ul>
</form>
I only want to apply the rules to the "new_password"
Add a checkmark (green) if the rules are successful or red X if they don't meet the criteria.
I am new to Angular but not new to RegEx. I have the Expression
"^(?=.{8}$)(?=.*[A-Z])(?=.*[0-9])(?=.*[,##$])"
It would be nice to know which of the rules it has been violated
You can use ngPattern on the input. More information here.
You can use ng-pattern for Regex. This will not allow you to know which of the rules encoded in your pattern were violated. For that, you may want to use a combination of directives like, ng-minlength, ng-maxlength.
Take a look at: https://docs.angularjs.org/guide/forms
You can also use custom $validators in order to apply specific validation logic to your fields (but like the other posters mentioned, ng-pattern is great for that purpose).
It's working in conjunction with models, when you model changes (= the field value changes), it's checking it against the custom registered $validators (through a directive for instance) and updating the model with the results of the validation.
Here is a working plunkr with your regexp: http://embed.plnkr.co/CdITVLnZOZgAzrqAV4iA/preview
(you can use the code view to check out how it's done)
You can also read the AngularJs documentation about forms, you can do a lot of interesting stuff using directives and models within your forms.
https://docs.angularjs.org/guide/forms
I am trying to validate email address in my html page using angular directive.
To me valid email address is
hello#mycompany.com
The following regular expression allows following email address
hello#mycompany
What kind of regular expression I could use that would also enforce the ".com" part of email address meaning enforce "." and any thing after "."
I have researched internet and used different listed regular expression but none are working
<div class="form-group" ng-class="{ 'has-error': registerUpdateForm.Email.$invalid }">
<label class="col-sm-3 control-label" for="Email">Email Address</label>
<div class="col-sm-9">
<input required type="email" data-ng-model="auth.Email"
data-ng-pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$"
id="email" name="Email" class="form-control" /> <!--ng-pattern="matchPattern"/>-->
</div>
</div>
The expected value is a Regexp or an inline pattern, which in javascript looks like /pattern/. The regular expression itself looks good, so just try adding the forward slashes at the beginning and end:
<input required type="email" data-ng-model="auth.Email"
data-ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"
id="email" name="Email" class="form-control" />
Plunker Demonstration
The W3C specification for <input type="email"> says that the email address must match the regex
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
so that would be a reasonable start on something like (untested)
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+\.com$/
Note that you can't restrict the top-level domain to {2,4} characters any more, if you want to allow more than just ".com": Proposed domains.