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>
Related
Hi i have this code with HTML5:
<form id="pay" method="GET" class="row g-3" style="display:none;" type="hidden">
<strong>Date</strong></a><br>
<div class="col-md-10">
<label for="name_users_card" class="form-label">user card</label>
<input type="text" class="form-control" id="name_users_card"
pattern="^[A-Za-zèòà\s]$"
minlength="3"
maxlength="20"
placeholder="titolare carta"
title="take a valid name" required/>
</div>
</form>
When I try to run the code, the required control is not working. Why?
don't actually understand the problem but you have an incomplete <a> tag and you made your form hidden by setting display:none;
Your Regular Expression Pattern:
^[A-Za-zèòà\s]$
is a single character.
If you want zero to any number of characters, use:
^[A-Za-zèòà\s]*$
If you want one to any number of characters, use:
^[A-Za-zèòà\s]+$
If you want exactly twenty characters, use:
^[A-Za-zèòà\s]{20}$
If you want three to twenty characters, use:
^[A-Za-zèòà\s]{3,20}$
If you want three to any number of characters, use:
^[A-Za-zèòà\s]{3,}$
I'm trying to create a form, and set the pattern and title fields programatically through JS. Can someone help me with working out why this isn't working.
The code below results in not being able to enter anything into the form field and the popup error saying "match the requested format".
var node = document.getElementById("text");
node.setAttribute("pattern", "\d+");
node.setAttribute("title", "Six or more characters");
<p>A form with a password field that must contain a positive integer:</p>
<form action="/action_page.php">
Enter a number: <input type="text" id="text" name="text">
<input type="submit">
</form>
The \ is an escape character. If you want to write a \ you will have to escape it with \\
var node = document.getElementById("text");
node.setAttribute("pattern", "\\d+");
node.setAttribute("title", "Six or more characters");
node.setAttribute("oninvalid", "setCustomValidity('Six or more characters')");
// this line is needed to clear the error status onchange, so user can enter newly correct input
node.setAttribute("onchange", "try{setCustomValidity('')}catch(e){}");
<p>A form with a password field that must contain a positive integer:</p>
<form action="/action_page.php">
Enter a number: <input type="text" id="text" name="text">
<input type="submit">
</form>
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>
I have phonegap application developed in android studio.
I have an input field that has to allow abc characters, quotes and double quotes.
wanted html code:
<input placeholder="last name" type="text" ng-model="currentUser.LastName"
ng-pattern='/^([A-Za-z\"\' ]){1,45}$/'
required
class="form-control"/>
but I have a problem - the quotes in the regex close the whole regex.
what I can do:
ng-pattern='/^([A-Za-z\" ]){1,45}$/'
or
ng-pattern="/^([A-Za-z\' ]){1,45}$/"
but I cant find way to include quotes marks and double quotes, too.
I tried it:
in scope:
$scope.regex=/^([A-Za-z\"\' ]){1,45}$/;
in html page:
<input placeholder="last name" type="text" ng-model="currentUser.LastName" name="userLastName1"
ng-pattern='{{regex}}'
required
class="form-control"/>
it did not work, too (my editor is android studio, maybe other editors are better?).
is there any way to include both quotes and double quotes in one regex?
You can use hex values for those entities, \x22 for " and \x27 for ':
$scope.regex= "/^[A-Za-z\x22\x27 ]{1,45}$/";
And you need no outer parentheses.
You can test it here.
Or here is a snippet showing it works in an ng-pattern attribute:
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="/^[A-Za-z\x22\x27 ]{1,45}$/" required placeholder="last name">
<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>
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>