I'm using the native HTML5 validation for an "email" field and it works fine! However, I would like to increase it to a specific case, where I do not want to accept emails with "free" domains (gmail, hotmail, etc).
I did the regular expression and tested it and it worked correctly (Here you can do the test: https://regex101.com/r/wBt3YN/1). But when applying to the pattern of the email field, nothing happens.
How to proceed?
Some strings:
maykel#gmail.com -> Can't allow
maykel#marfin.com -> Can allow
maykel#outlook.com -> Can't allow
Regex Pattern
^([\w-.]+#(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$
My form
<form>
<div class="field">
<label for="email">Email Corporativo</label>
<input
type="email"
name="email"
id="email"
value=""
pattern="^([\w-.]+#(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$"
title="Utilize seu email corporativo"
placeholder=""
required
>
</div>
<input type="submit" value="ENVIAR">
</form>
Here is my code where I do not allow yahoo & hotmail. However, e-mail validation is a very delicate thing.
<form>
<div class="field">
<label for="email">Email Corporativo</label>
<input
type="email"
name="email"
id="email"
value=""
pattern="^[^#]+#(?!(yahoo|hotmail))[^#]+\.[a-z]{2,}$"
title="Utilize seu email corporativo"
placeholder=""
required
>
</div>
<input type="submit" value="ENVIAR">
</form>
Related
I'm trying to setup a pattern validator with the following regex :
^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$
Try Regex here
That should allow me to get 1 to 3 digits, and then a decimal part of maximum 2 digits, and that should allow empty values as well.
The problem is that either my input is of type text and the validator is rejecting my input (any input since it's not considered as a digit I believe); or the input is of type number and without step="any" my input value is rejected if I have a decimal input (while the regex seems to be working on simpler values), and with step="any" it seems my regex is not working at all, allowing whatever value because of the step.
<form (ngSubmit)="onSubmit()" #bottleUpdatePriceForm="ngForm" >
<div class="form-group" *ngFor="let bottle of bottleArrayToUpdate; let i = index">
<label for="bottlePrice">{{bottle.name}} : </label>
<input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"
[pattern]="pricePattern"
[(ngModel)]="bottleArrayToUpdate[i].price">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<!--(click)="bottleUpdatePriceForm.reset();"-->
</form>
EDIT : adding my component code for regex binding
private pricePattern = /^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$/;
Be it text or number I don't really care, I just need the pattern to work on my input... Any insight or something I am missing ?
Here is a working example in a plunkr : https://plnkr.co/edit/znVaS7?p=info
You can switch the input line in the plunkr to see the different cases :
<input type="text" class="form-control" name="bottlePrice" autocomplete="off"
<input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"
Unrelated to the main issue : Is there any way to call the form reset from the component rather than directly in the template ?
==> bottleUpdatePriceForm.reset();
I was wondering, this is just for bonus.
Thanks a lot
This is not a direct solution for the not working regex, but this works with the same purpose. So remove the pattern and just change your input with max and min instead:
<input type="number" class="form-control" name="bottlePrice"
autocomplete="off" step="any" max="999" min="0"
[(ngModel)]="bottleArrayToUpdate[i].price">
I am trying to create sign up and log in forms for my Ember app. I am using the input helpers, but when I set the field for email and password the placeholder text comes in the format of the respective types and also shows the "value" as the placeholder text instead of the defined "placeholder" text. The first name and last name fields show the correct placeholder text and in the correct format.
Here is the code from my sign up template:
{{input type="text" value=firstname id="firstname" placeholder="first name" autofocus="autofocus"}}
{{input type="text" value=lastName placeholder="last name"}}
{{input type="email" placeholder="email" value="emailAddress"}}
{{input type="password" placeholder="password" value="password"}}
{{input type="password" placeholder="confirm password" value="confirmPassword"}}
Here is what the form looks like as a result:
Any ideas how to fix this?
It is because the value passing to the input helper in case of password is a string
{{input type="password" placeholder="password" value="password"}}
it should be
{{input type="password" placeholder="password" value=password}}
see this Twiddle
I've built a simple form to open up a JIRA ticket based on user input. I've almost got all of it, except I don't know how to use the form element in the POST request. Here's what I have so far:
<form target="_blank" action='http://baseurl.com/secure/CreateIssueDetails!init.jspa?pid=10517&issuetype=3&summary=Change+application+name+to+{{new_name}}&reporter={{request.user}}&priority=5&assignee=xxx' method='post'>
<label for="new_name">New name: </label>
<input id="new_name" type="text" name="new_name" value="{{item.name}}">
<input type="submit" value="Create JIRA ticket">
</form>
So I just need the value the user puts in the new_name element to be passed into the appropriate spot in the URL. How do I access that?
It sounds like you're getting POST and GET mixed. POST data would not be included in the URL itself, but rather in the request payload itself.
So, your URL would be http://baseurl.com/secure/CreateIssueDetails!init.jspa
The payload would be separately put in the body of the HTTP request.
If you need to use a GET method, the URL itself would be the same as above, but the URL that eventually gets hit would be http://baseurl.com/secure/CreateIssueDetails!init.jspa?new_name=WHATEVERVALUE.
If you need additional key-value pairs to get passed, just add them as hidden fields and pass them that way.
Your code, edited:
<form target="_blank" action='http://baseurl.com/secure/CreateIssueDetails!init.jspa' method='post'> <!-- ARE YOU SURE IT'S A POST REQUEST AND NOT A GET? -->
<label for="new_name">New name: </label>
<input id="new_name" type="text" name="new_name" value="{{item.name}}">
<input type="hidden" value="10517" name="pid">
<input type="hidden" value="3" name="issuetype">
<input type="hidden" value="5" name="priority">
<input type="hidden" value="Change application name to {{new_name}}" name="summary">
<input type="hidden" value="{{request.user}}" name="reporter">
<input type="hidden" value="xxx" name="assignee">
<input type="submit" value="Create JIRA ticket">
</form>
Makes sense?
django form
{% for field in form.fields %}
{{field}}
</div>
{% endfor %}
If there is an error {{field.email}} will output this html with a post data value
<input id="id_email" type="text" value="gffdg" />
I want to use HTML 5 inputs but don't know how to get the post value if there is error
<input id="id_email" type="email" >
edit..
I was hoping not to use widgets with my django forms and just type the html5 code in my template (type="email" not type="text")
<input id="id_email" type="email" >`
but can't figure out how to get the value back after a post with errors.
<input value="?????" />
If you are trying to get the bound value of the email field, then the following template code should work:
<input id="id_email" type="email" value="{{ form.email.value }}">
If the value is not set, then it will be a blank field.
I have two different forms on my home page: one for logins and one for registrations. As you can see from the code, the forms have inputs with different names:
<h3> Log In </h3>
<form action="/login/" method="POST" class="form-vertical" style="padding-top: 5px">
<input id="id_login_username" type="text" name="login_username" maxlength="25" />
<input type="password" name="login_password" id="id_login_password" /><br>
<button type="submit" class="btn btn-info">Login</button>
</form>
<h3> Sign Up <small>(It's free!)</small></h3>
<form action="/register/" method="POST" class="form-vertical" style="padding-top: 5px">
<input id="id_register_username" type="text" name="register_username" maxlength="25" />
<input type="text" name="register_email" id="id_register_email" />
<input type="password" name="register_password" id="id_register_password" />
<input type="password" name="register_password2" id="id_register_password2" /><br>
<button type="submit" class="btn">Submit</button>
</form>
Which renders to this in Chrome:
What can be causing this? And how can I fix it?
That's a really good question and I'm sorry to say I have no idea. Did
you try to register once and also login at least once? If so, that
"might" be what's causing it as browsers come complete with the
"autoremember" feature.
Assuming autofill is enabled (it is by default), the reason it autofills the rest is because chrome's autofill server works on regular expressions, not exact matches.
All the regular expressions used for the various fields can be found in autofill_regex_constants.cc.utf8.
From there you can see that the expression for email field is "e.?mail" and for username it is "user.?name|user.?id|nickname|maiden name|title|prefix|suffix"
It appears a similar question has been asked before:
What is the correct way to stop form input boxes auto-completing?
There is an autocomplete attribute you can use in form fields.
<input id="id_login_username" type="text" name="login_username" maxlength="25" autocomplete="off" />