I'm trying to limit my text input to only allow letters, not numbers. With a maximum of 100 characters. I'm having trouble finding out how to use the pattern attribute to only allow letters. Here is a portion of my code attempting this.
<form action="http://www.severien.com/grit/formecho.php" method="post" target="_blank">
<label for="videorequests"> Video Requests:</label>
<input type="text" id="videorequests" name="videorequests" maxlength="100" pattern="[a-z]{1,100}" />
<input type="submit" value="Submit" class="submitbutton" />
</form>
Using the attribute maxlength I'm limiting the character input to 100. How do I use pattern to limit the character use to only letters, excluding numerical characters?
use this
pattern="[A-Z a-z]{1,100}"
Related
I have a HTML form which currently has unique id's for each input (or select) like so.
example 1
<input type="number" id="qty-a-row" min="0" max="999" autocomplete="off" value="" style="border:0px; outline:0px; display:inline-block; width:50px;" />
example 2
<select id="ps_a_row" autocomplete="off" style="width:324px; border:0px; outline:0px; display:inline-block">
each id is unique. I'm now trying to add in a name="" with the same value as every id="" found so example 1 above becomes.
<input type="number" id="qty-a-row" name="qty-a-row" min="0" max="999" autocomplete="off" value="" style="border:0px; outline:0px; display:inline-block; width:50px;" />
and example 2 becomes...
<select id="ps_a_row" name="ps_a_row" autocomplete="off" style="width:324px; border:0px; outline:0px; display:inline-block">
and so on for every id="anything" it finds.
I'm using notepad++ and with regex ticked currently trying...
Find = id="(.*)"
Replace = id="\1" name="\1"
but this is only finding some id's and duplicates all other tags it finds after the id it finds too.
The complete code for the form I'm trying to edit is here...
https://pastebin.com/ZAE4Gffk
Find id="([^"]+)" and replace it with id="\1" name="\1" , but you shouldnt use regex for HTML manipulation. Use appropriate tools for that.
Demo
I am new in Thymeleaf, had searched on the web and SO for usage of html regex. I am not passing a th:object to my frontend for this page, hence What I would like is to handle validation with a pattern attribute in the form input. Would like to warn user if they don't enter extension for the file. (".xml" in this case). So I'd like to see if string contains substring or not.
However could not see why following fails.
(Used the fileName field with pattern="/xml/", since static value is being checked on the regex. Also tried th:pattern but no luck.)
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="#{layouts/main}">
<div layout:fragment="content" class="container">
<div class="page-header">
<h2>Add New Project</h2>
</div>
<!-- multistep form -->
<div id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Project Details</li>
<li>Choose operations</li>
<li>Save operations</li>
<li>project saved</li>
</ul>
<form id="project-details" class="project" method="post">
<h2 class="fs-title">Project Details</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" th:field="${testSuitProject.name}" placeholder="Project Name" />
<input type="text" th:field="${testSuitProject.endpoint}" placeholder="Service End Point" />
<input type="text" th:field="${testSuitProject.fileName}" placeholder="FileName ex: sample_project.xml" pattern="/xml/" />
<input type="submit" name="next" id="btn-first" class="next action-button" value="Next" />
</form>
</div>
</div>
Any suggestions appreciated.
Your regex is simply wrong. To match string to end with ".xml":
<input type="text" placeholder="FileName ex: sample_project.xml" pattern=".*\.xml" />
.* = match any characters (in the beginning of the string).
\. = a literal dot, since dot means any character in regex.
(Maybe you confuse with JavaScript where reg expression is surrounded by /:es to create a regex object.)
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 using HTML5 form validation on the frontend to provide users with some feedback when they exceed a character limit in an input.
<input id="description" placeholder="description" required="required" type="text" pattern=".{3,500}">
This, with some CSS, will let me tell the user if they have not entered between 3 and 500 characters.
How could I actually set the pattern to match the number of "words" instead of characters .e.g. minimum of one word and max of 50 words.
This regex should work, the first clause (\w+\W+){0,49} will match between 0-49 words (of one or more characters) followed by one or more whitespaces. The second part \w+\W* will match one more word with optional whitespace following.
<form>
<input id="description" placeholder="description" required="required" type="text" pattern="(\w+\W+){0,49}\w+\W*">
<input type="submit" />
</form>