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>
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 very new to JS. But basically, I'm creating a form. Using JavaScript, how do I take a form so that you must fill in form data?
Thanks!
HTML:
<form>
<p>First Name:</p>
<input type="text" name="firstname" class="form">
<p>Last Name:</p>
<input type="text" name="lastname" class="form">
<p>Email:</p>
<input type="text" name="email" class="form">
<p>Questions / Concerns:</p>
<textarea name="concerns" rows="5" cols="30"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
There are multiple ways of solving this particular problem.
The easiest way would be to use the required tag in elements:
<input type="text" name="firstname" class="form" required>
Edit: This may not work in very old browsers.But I don't believe you need to worry about that now.
Use required tag in all of your input elements which you need filling compulsorily.
Once you have your basic problem solved, look at using javascript functions for validation. Ref: https://www.w3schools.com/js/js_validation.asp
Once you know this, you can safely progress to reading on how validation is done on large projects- https://validatejs.org/
use document.getElementByTagName to get the input tag
Use addEventListner with first parameter as blur to detect input leave
Use this.value within if statement to check if empty
Alert something
var element=document.getElementByTagName(input);
element.addEventListner("blur",myFunction);
function myFunction(){
if(this.value==''){
alert ("write something");
}
}
In the following form, the ng-pattern validation does not work.
The regex works as i expect in https://regex101.com.
It should show .custom-error div if the user enters some special character.
Where am I doing it wrong?
<form novalidate name="myForm">
<label for="subnet">only alphanumeric</label>
<input type="text" name="subnet" ng-model="subnet" class="form-control"
id="subnet" required ng-pattern="/[a-zA-Z\x7f-\xff]\s*/">
<div class="custom-error" ng-show="myForm.subnet.$error.pattern">
not in one of predefined characters
</div>
</form>
I think the ng-show="myForm.subnet.$error.pattern" is wrong. I read the official angular doc and i think you should try ng-show="!myForm.subnet.$valid" instead :
<input type="text" name="subnet" ng-model="subnet" class="form-control" id="subnet" required ng-pattern="/[a-zA-Z\x7f-\xff]\s*/">
<div class="custom-error" ng-show="!myForm.subnet.$valid">
not in one of predefined characters
</div>
It hope it will help you
Change the ng-pattern code to ng-pattern="/^[a-zA-Z\x7f-\xff\s]*$/". It will work now.
Working plunker here
All the best.
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>
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>