I'm trying to validating a form submit just if, in just ONE field, the user enters his First Name and Last Name.
I know: in other countries, it's not like this, but I'm doing for Brazil, so its First Name and Last Name.
What I have tried:
<input type="text" name="fullname" pattern="^.* .*$">
But it didn't work.
The field needs a First name (minimum 2 characters, no limit), a SPACE, then the last name with minimum 1 characters and no limit too.
Examples:
TRUE:
João da Silva
João S
João S.
Joao S. Pedro
FALSE:
Joao
João
Joao (just a space)
I hope you can understand me.
Thank you so much.
Actual code: does not work any validation:
<form action="http://xxxxxxxxx" method="POST">
* Nome Completo: <input type="text" name="fullname" required="required" pattern="^(\w\w+)\s(\w+)$" /><br>
* Telefone: <input type="tel" name="mobilephone"/><br>
* E-Mail: <input type="email" name="emailaddress1"><br>
* Informe melhor horário para contato: <input type="text" name="crmcol_sugestaodecontato"><br>
<input type="hidden" name="crmcol_novocontato" value="64340000"><br>
<input type="hidden" name="crmcol_origemdoregistro" value="643400005"><br>
<input type="submit" value="Enviar" class= "botaoenvio" onclick="this.disabled=true;this.value='Enviando, aguarde um momento..';this.form.submit();">
This pattern looks for 2 or more "word characters", a single space, then 1 or more following word-characters:
pattern="^(\w\w+)\s(\w+)$"
The automatic client-side validation using pattern="" won't happen unless the input is inside a <form>, you should also add the required boolean attribute too to avoid empty (but valid) input.
I've made a JSFiddle demonstrating it here: https://jsfiddle.net/3r4Luwnp/
Update:
I created a JSFiddle with your updated markup and it looks like your custom script in your onclick handler calls form.submit() directly, this will skip client-side input validation.
If you change the button to <button type="submit"> and remove the onclick JavaScript then it works fine:
https://jsfiddle.net/rpkn31d6/
Related
I'm trying to figure out a pattern regex for credit card expiry date input that would return mm/yy
currently I came across yyyy-mm-dd pattern represented like this:
<input type="text" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" />
That I tried to edit, but I can't seem to get it right for mm/yy
If you use this pattern, user couldn't enter invalid months number like "34" - first number has to be "0" or "1". "/" is not optional here.
Also "title" can help user to enter valid code sending additional message in tooltip.
<form>
<input
type="text"
pattern="(?:0[1-9]|1[0-2])/[0-9]{2}"
title="Enter a date in this format MM/YY"
/>
<input type="submit">
</form>
Try with this regex, it should work:
<form>
<input type="text" pattern="([0-9]{2}[/]?){2}" />
<input type="submit">
</form>
It matches two({2}) digits([0-9]) plus an hypothetical "/"([/]?), all this two times.
The first one it will match "mm/", then just the "yy" part.
Hope it helps!
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'm trying the pattern attribute for the first time, and I can't get it to work (my browser does support it, though).
Right now I have:
input type="text" pattern="[a-zA-Z0-9]{6}" name="formName"
The first problem is that is doesn't notify me if it's blank; the second problem is that if I do type in something, it won't accept it. I want it to accept alphanumeric characters and be exactly 6 characters is length. I tried it with forward slashes and a few other variations.
As Duikboot already pointed out, the right way to do it is:
<input type="text" name="formField" pattern="[a-zA-Z0-9]{6}" required>
The required attribute causes the validation to fail, when the field is empty.
The pattern attribute defines the regex to test against, when the field is not empty.
(Your initial pattern seems to work fine.)
More info can be found here.
This is simple enough so as not to require a demo, but nonetheless you can find one here.
Works for me here : http://jsfiddle.net/barbuslex/nR6yg/
<form>
<input type="text" pattern="[a-zA-Z0-9]{6}" name="formName" />
<input type="submit" value="OK" />
</form>
I use Google Chrome
You simply need to add the required attribute to your tag, which will notify the user if they attempt to send the form with that very field blank.
<input type="text" pattern="[a-zA-z0-9]{6}" name="formName" required>
Try this code its working perfectly
<html>
<body>
<form action="demo_form.asp">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
</body>
</html>
Enter invalid country code and click submit button. Then You can get a message (title="Three letter country code")
I have a simple form and i want the submit button not to work for the conditions i give in the pattern, but if i leave it blank the submit works. how can i make the pattern not to accept it if it is blank?
<form action="test.php" method="POST">
Enter user name:
<input type="text" name="username" pattern="[A-Za-z0-9]{1,20}">
<input type="submit" value="submit">
</form>
I thought the {1,20} is enought but it seems it's not.
HTML has the required attribute to accomplish this. If you set any input to be required, modern browsers won't let you submit the form if those fields are empty.
<input type="text" name="username" required="required" pattern="[A-Za-z0-9]{1,20}">
To prevent errors from showing on load, you can not use the HTML5 required attribute. You can use JavaScript. For example:
if ( $('#form-password').val() === "" )
{
e.preventDefault();
}
Using HTML Patterns to match at least one:
<input type="text" name="username" pattern=".{1,}">
I have this code in a Django Template:
input type="text" name="ppoisNomePOI" value={{ request.session.ppoisNomePOI }}
If my "request.session.ppoisNomePOI" is "John" then in the page it appears "John" in the input, but if my "request.session.ppoisNomePOI" is "John Flanders Simpson" it only appears "John"
I assume it was a problem with the spaces in the value.
From the sounds of it, the browser is probably treating the subsequent words as empty attributes and being interpreted as:
<input type="text" name="ppoisNomePOI" value="John" Flanders Simpson>
Try putting quotes around the value.
value="{{ request.session.ppoisNomePOI }}"
This will force it to be interpreted as:
<input type="text" name="ppoisNomePOI" value="John Flanders Simpson">