HTML input pattern not working validation - javascript

I have very strange issue.
in a very sample search form with one input field:
<input pattern="\S.{3,}" name="text"/>
The validation fails for value dds sdsd, but JS says it's Ok.
/\S.{3,}/.test(' dds sdsd')
true
/\S.{3,}/.test(' ')
false
Maybe I am missing something small or pattern is wrong, but according to regex.com it should be valid.
The idea is to prevent submit empty spaces. I am searching for a solution without write JS code.
<form method="GET" action="/">
<input class="form-control" name="text" type="text" pattern="\S.{3,}" />
<input type="submit" value="search" >
</form>

The HTML5 pattern is anchored by default, ^(?: and )$ are added at the start/end of the pattern when it is passed JS regex engine.
You need to use
<input pattern=".*\S.{3,}.*" name="text"/>
to make it work the same way as in JS with RegExp#test.
However, to require at least 1 non-whitespace char in the input, I'd recommend using
<input pattern="\s*\S.*" name="text"/>
See this regex demo. It will match 0+ whitespace chars at the start of the string (\s*), then will match any non-whitespace char (\S) and then will grab any 0+ chars greedily up to the end of the input.
<form method="GET" action="/">
<input class="form-control" name="text" type="text" pattern="\s*\S.*" title="No whitespace-only input allowed."/>
<input type="submit" value="search" >
</form>

Related

Regex which allows alphanumeric character and only single "-"

I need to prevent user input of the following characters into input fields
~!#$%^&*()+/\"'`:;{}[]|<>=–
Take note that the – is 2 consecutive -
I have tried ^[a-z ]+([-])[a-z ]
Here is variation of #Rohan's/#mplungjan's answer. As the validation will be done at submit time the typing of more than one "-" will not be prevented while you are typing.
<form onsubmit="return false">
<input type="text" pattern="^[\w\s]*-?[\w\s]*$" title="Only letters, numbers, whitespaces and one '-' are allowed">
<input type="submit" />
</form>
Here is another JavaScript-based version, that will quietly remove any of the unwanted characters:
const pattern=/^[\w\s]*-?[\w\s]*$/
document.querySelector("input").addEventListener("input",ev=>{
ev.target.value=ev.target.value.replace(/[^a-zA-Z0-9 -]/g,"").replace(/-(?=.*-)/,"")
})
<form onsubmit="return false">
<input type="text">
<input type="submit" />
</form>

How to make input password require at least one special character (bracket included)

I was wondering how to add in the special character part with brackets like {} [] () and other stuff like " ' - to the unique character I tried below, but for some reason when I add in another of those characters it stops working.
<-- works but does not have any brackets or quotes for special character-->
<form acton = "#">
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!##$%^&*+`~=?\|<>/]).{8,}"
<button>submit</button>
</form>
The part above works but does not have quotes or more special character
Code below has bracket but does not work
<-- does not work (if you do not enter special character user will be able to submit but it does not have any brackets -->
<form acton = "#">
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[~`!##$%^&*()-_=+[]{};:'.,"\|/?><]).{8,}"
<button>submit</button>
</form>
also this did not work (from an answer)
<form acton = "#">
<input type="password" id="pass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!##$%\^&*()\-_=+\[\]{};:\'.,\"\\|/?\>\<]).{4,}">
<button>submit</button>
</form>
I am looking for an answer that makes the bottom part (the one with brackets and all of those special character I included) works.
Since it is regex, all of the characters inside [.....] are allowed, so you should add brackets to there. You can do this with the usage of escape character (because brackets has a role in regex). So just add \] and \[ to the characters allowed inside [.....].
try:
<input type="password" name="pw" pattern="(?=.*?[#?!#$%^&*-\]\[])"
By the way.. I would recommend working with regex cheat sheet, it will help you a lot in validation tasks.
As for your EDIT:
The " and ' needed to be escaped. While \" \' won't work you can use \x27 and \x22 instead, these are the hexadecimal representation of " and ' in the ascii table.
try:
<form acton = "#">
<input type="password" id="pass" required pattern = "(?=.*\d)(?=.*
[a-z])(?=.*?[0-9])(?=.*?[~`!##$%\^&*()\-_=+[\]{};:\x27.,\x22\\|/?><]).{4,}">
<button>submit</button>
</form>
You should escape regex (e.g. \]) characters if they need to be matched during pattern search. Also, refer to the existing answer:
Braces and brackets in passwords
The following works for me, hopefully it should work at your end:
(I merely added escaped characters)
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!##$%^&*+`~'=?\|\]\[\(\)\-<>/]).{8,}">
You're actually very close. The biggest mistakes are:
You should escape some of the special characters inside the character group and you should have hyphen as the last character (otherwise it's a range).
Here is the RegExp you request:
<input type="password" id="pass" required pattern = "(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!##$%^&*()_=+\[\]{};:&apos;.,"\\|\/?><-]).{4,}">
Update: I forgot to html encode the pattern for use directly in html. Now it should work.

Regex pattern not working for input pattern match

<input type="text" id="url" name="url" pattern="/ ^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)(amazon)|(flipkart)+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$ /" required />
The displayed is my input. But I am unable to match any input. It should correctly match any website starting with http://flipkart.com or http://amazon.com. I checked on rubular. The expression is correct. Where am I wrong . please help . Thank you./
Your problem comes from: (amazon)|(flipkart)+, you need to group these two strings and remove the superfluous +.
(amazon|flipkart)
You couls also reduce the regex to:
(https?://(?:www\.)?)(amazon|flipkart)([-.][a-z0-9]+)*\.[a-z]{2,}(:[0-9]{1,5})?(/.*)?
Can you please try the following, it worked for me
<input type="text" id="url" name="url" pattern="(https:[/][/]|http:[/][/]|www.)[amazon|flipkart]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&%\$#\=~])*$" required />

What is the regular expression for username shouldn't be root

What I tried
^((?!root).)*$
Results
root invalid username
admin valid username
rootwee invalid username (this should be valid)
root123 invalid username (this should be valid)
I tried removing . from regex, then its not working
Can you please help with this?
Your regex features a tempered greedy token that disallows a certain substring in the whole input. Thus, "rootwee" and "root123" are invalid.
You can use
/^(?!root$)/
See demo
The anchored lookahead (?!root$) makes sure the whole input is not equal to root, but the string itself can contain root.
Note that when using a literal regex declaration, we needn't match the whole input string.
Here is a demo snippet:
function formCtrl($scope){
$scope.onSubmit = function(){
alert("form submitted");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="text" name="field" ng-model="formCtrl" ng-pattern="/^(?!root$)/" required>
<span ng-show="myForm.field.$error.pattern">Not valid!</span>
<span ng-show="myForm.field.$error.required">This field is required!</span>
<input type="submit" value="submit"/>
</form>
</div>

ng pattern for allowing only '-' in input text box

Is there any pattern that will allow only '-' in the input text box and deny entering other special characters like #, #, $ etc.I tried with the pattern ng-pattern="/^[a-zA-Z0-9]*$/" which will deny all special characters from being entered in the field.
<form name="myForm">
<input type="text" ng-pattern="/^[a-zA-Z0-9]*$/" ng-model="name" name="name">
</form>
<span class="error pop_up" ng-show="myForm.name.$error.pattern">Special Characters are not allowed</span>
Put the hyphen at the end of your character class. When it is the last character it is assumed as a literal hyphen. For example: /^[a-zA-Z0-9-]*$/
<form name="myForm">
<input type="text" ng-pattern="/^[a-zA-Z0-9-]*$/" ng-model="name" name="name">
</form>
<span class="error pop_up" ng-show="myForm.name.$error.pattern">Special Characters are not allowed</span>

Categories

Resources