form with input attributes 'required' and 'pattern' doesn't work - javascript

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,}$

Related

Different title when input invalid and input empty

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?
I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</form>

why doesn't ng-pattern work?

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.

Angular JS: preserve leading zeros for a number

I want to preserve the leading zeros for a number but as usual it trims them.
I tried
<input type="tel" pattern="[0-9]*">
But this allows text input which breaks my case.
Please help!!!
You can use the input type="text", use the ng-pattern to validate your expressions and then use ng-message to validate your field and display errors.
This won't remove your lead 0s.
So your HTML will look something like this:
<input type="text" ng-pattern="[0-9]*" ng-model="myTel">
<div ng-messages="myForm.myTel.$error">
<div ng-message="pattern">You can insert only digits here</div>
</div>

how to include qutoes + double quotes in ng-regex?

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>

Angular text form with numbers only?

So I have an input form in Angular here:
<input ng-model="sc.zip" class="form-control" maxlength="5" type="text" />
I don't want type="numbers" because the form needs to be a plain empty textbox. However, I only want the user to be able to type numbers. Either I need to detect when the input is not a digit, or be able to search through the box to find non-digits when submitting.
Either way, I need to validate that the form is digits only. Any help would be appreciated!
use regex
<input name="title" type="text" ng-model="sc.zip" ng-pattern="/^[0-9]*$/" required/>

Categories

Resources