How to validate pattern matching in textarea?
HTML5 <textarea>
element does not support the pattern
attribute.
See the MDN doc for allowed <textarea>
attributes.
You may need to define this functionality yourself.
Or follow the traditional HTML 4 practice of defining a JavaScript/jQuery function to do this.
HTML - Using pattern attribute
You cannot use pattern
attribute on textareas, see the documentation.
maxlength specifies a maximum number of characters that the
is allowed to contain. You can also set a minimum length that is
considered valid using the minlength attribute, and specify that the
will not submit (and is invalid) if it is empty, using the
required attribute. This provides the with simple
validation, which is more basic than the other form elements (for
example, you can't provide specific regexs to validate the value
against using the pattern attribute, like you can with the input
element).
Perhaps implement a regex match with javascript?
function validateTextarea(text) {
var re = /ser/g;
var result = text.match(re);
if(result != null && result.length > 0)
// Do something
}
Then probably the best way is to check the function in onsubmit
form attribute.
Fix regex for textarea
In the pattern that you tried, you are repeating the outer group 1 or more times, and inside the group you are matching 1 or more times [A-Za-z0-9-_]+
, then \|{2}(unlimited)
.
Due to the repetition of the outer group and the optional newline, the pattern can match 1 or more times the 2||unlimited
pattern
You could start the match with [A-Za-z0-9-_]+
or [\w-]+
and then match the double pipe and unlimited at the end of the string.
^(?:[\w-]+\|{2}unlimited(?:\r?\n|$))+$
Regex demo
How to validate single lines in Html TextAreaFor against regular expression(s)
At the moment your validation will be passed if your string from text area contains a sequence from 19 numbers. In order to make sure each line is valid you'd better use ^
and $
anchors to match the whole string from start to end. Something like this:/^(\d{3}\n?)*$/
var textArea = document.getElementById("smt-textarea");textArea.onkeyup = function(evt) { evt = evt || window.event;
if (evt.keyCode === 13) { validateTextArea(this); }};
function validateTextArea(textArea) { let regex = new RegExp(/^(\d{19}\n?)*$/);
if (regex.test(textArea.value)) { alert("IT'S A MATCH !!!"); } else { alert("SORRY, NO MATCH."); }}
<textarea name="" id="smt-textarea" rows="25"></textarea>
regex validations for textarea angular
done
ng-maxlength="500"
\x20{1}/g - not consecutive space characters
\W{20,}/g - no word at least 20 chars
[^\s]{1}/g - not be consecutive special characters
try this ng-pattern="/(\W{20,}|\x20{1}|[^\s]{1})/g"
Regex for textarea
You can use
/^\S.*(?:\r?\n\S.*)*$/u
See the regex demo.
Details
^
- start of string\S.*
- a non-whitespace and the rest of a line(?:\r?\n\S.*)*
- zero or more repetitions of\r?\n
- a CRLF or LF line break sequence\S.*
- a non-whitespace and the rest of a line
$
- end of string.
JavaScript regex on textarea input
You need to:
- Use a regex literal to avoid double backslash escaping the shorthand classes (right now,
"\."
translates into.
) - Remove anchors from the pattern (i.e. the
^
and$
) - Add a global modifier to the regex (
/g
) - Use a
String#match()
with the regex (in case you do not need the values captured with the capturing groups, else, you need to run theRegExp#exec
inside a loop to collect those).
function parseLogs(text) { var re = /([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})/g; var myArray = text.match(re); document.write("<pre>"+JSON.stringify(myArray, 0, 4) + "</pre>");}
<h5>Paste your Apache log file in the box below and click on Mine!</h5>
<textarea rows="5" cols="200" form="mine_log" id = "logs">12.34.56.76 45.45.34.24</textarea><form id = "mine_log" method = "" onsubmit="parseLogs(document.getElementById('logs').value)"> <input type = "submit" value = "Mine!!" /></form>
Related Topics
Can Outlook 2010 Use a Web Font in an HTML Email
How to Set The <Img> Tag with Basic Authentication
Flexbox - Fill Remaining Space
How to Specify The Order of CSS Classes
Header/Footer/Nav Tags - What Happens to These in Ie7, Ie8 and Browsers Than Don't Support HTML5
Set CSS Border to End in a 90 Instead of a 45 Degree Angle
How to Create a Wavy Shape CSS
Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
When to Use <Span> Instead <P>
How to Convert HTML with Mathjax into Latex Using Pandoc
How to Use Webp Images and Support Safari
At The End of The Day, Why Choose Xhtml Over HTML
How Does Stackoverflow Make Its Tag Input Field
Hiding The Toolbars Surrounding an Embedded Pdf
HTMLagilitypack Drops Option End Tags
File Opens Instead of Downloading in Internet Explorer in a Href Link
How to Style Radio Buttons with Images - Laughing Smiley for Good, Sad Smiley for Bad