How to Validate Pattern Matching in Textarea

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

  1. done ng-maxlength="500"

  2. \x20{1}/g - not consecutive space characters

  3. \W{20,}/g - no word at least 20 chars

  4. [^\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 the RegExp#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



Leave a reply



Submit