How do I make my input field only accept numbers (don't allow ANY letters to be inputted) and also hide the inputted values? It is taking a sensitive number. This also needs to keep the max and minlength validation at 4.
Here is what is not working:
<input matInput type="password" pattern="[0-9]*" minlength="4" maxlength="4" placeholder="Last Four of SSN" formControlName="ssn" required>
Try this regex for your pattern
[pattern]="'^[0-9]{4}$'"
Do not forget to set also the angular validator for this form field (own validator or pattern validator)
Related
So I'm trying to make a form for my assignment, and I am using the pattern attribute in html so only certain characters are required to be typed on the text box. But for some reason, the form is saying using that I'm using an incorrect format even though I made my pattern attribute that way.
Here's an example of the code and a picture of the problem.
<form>
<label for="mnumber">Mobile Number:</label>
<input type="text" required id="mnumber" pattern="[0-9]"><br><br>
<input type="submit" value="submit">
</form>
You did write:
pattern="[0-9]"
You are asking for only one number. You just forget to add '+' to accept more than one number. I guess what you are searching for is this:
pattern="[0-9]+"
pattern="[0-9]"
allows for only a single number character to validate (and be submitted). If you want to allow more than one character, here's your options:
One or more numbers:
pattern="[0-9]+"
Zero or more numbers:
pattern="[0-9]*"
One to three numbers:
pattern="[0-9]{1,3}"
you just need to change type="text" to type="number"
How to ensure between 7 and 10 digits are entered using pattern attribute in HTML? I have following code:
<input type="number" name="Student" id="studID" required pattern="\d{7,10}" />
The number type of input elements does not support a pattern attribute:
See the MDN documentation in <input type="number">
In addition to the attributes commonly supported by all types, inputs of type number support these attributes:
Attribute Description
max The maximum value to accept for this input
min The minimum value to accept for this input
placeholder An example value to display inside the field when it's empty
readonly A Boolean attribute controlling whether or not the value is read-only
step A stepping interval to use when using up and down arrows to adjust the value, as well as for validation
<input type="text"> has the pattern attribute.
You could use the min and max attributes like so.
<input type="number" name="Student" id="studID" min="1000000" max="9999999999">
<input type="number" name="Student" id="studID" minlength="7" maxlength="10">
should solve the problem you're having
You can add pattern attribute like this:
<input type="number" name="Student" id="studID" required pattern="7-10" />
how to use ng-mask for validation of phone number having pattern (xxx)xxx-xxxx . I tried using "pattern" in the input html tag but not satisfied with the result
because each time when user enters the phone number, the user must type both '()' and '-',and this will make the user annoying. So suggest a way to overcome this.
<input type="tel" name="phoneno" maxlength=13 ng-model="phone.number" pattern="^(?:\(\d{3}\)|\d{3}-)\d{3}-\d{4}$" required/></div>
This should work:
<input type="text" ng-model="phone.number" name="phone" mask="(999) 999-9999" clean="true" ng-model="phone">
I've got really simple question - is there any way to disable HTML5 validation only for some chosen inputs (instead of setting "novalidate" for whole form)?
I mean something like <input type='number' requirednovalidate>. But this doesn't work.
You may ask why I need type="number" or "required" then? Well, I need it there because my framework uses it for its own validation.
EDIT
It is about one special input - birth number. I need it to be of type number (because of mobile devices) but its value is mostly used with "/" (e.g. 860518/8757) which is not valid character for type number. So I need user to fill it without slash (8605188757). The problem is when there is invalid value filled in html5 input (e.g. "fsda" in number type), it seems like it is empty, with no value.
So when user fill the value in wrong format (860518/8757), html validation is disabled so the JS validation runs, it is validated like empty field. So the error message is like "Please fill the field birth number" (which is really confusing) instead somthing like "Sorry, wrong format".
My solution was to enable html5 validation for this field (so the default browser message is displayed when there is wrong format filled) but disable it for other fields so that they would be validated only with my JS validation.
You cannot disable HTML5 validation for a chosen input(s).
If you want to remove validation on the entire form you can use formnovalidate in your input element.
For example,
<input type="submit" value="Save" class="button primary large" formnovalidate/>
Note you can use formnovalidate with <input type=submit>, <inut type=image> or <button> -source
For more info go here or here.
novalidate attribute is only for form tag, it can't be applied on form controls.
You can remove the required attribute in js, after your framework validates:
$('[Selector]').removeAttr('required');
Now the selected field will not be validated.
Inputs will be validate when:
have attr required or prop required=true
aren't empty; don't have to have attr required or prop required=true
and have no attr disabled or prop disabled=true
If you want to validate data in a specific way, use pattern attr.
JSFiddle
(function() {
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
});
})();
<form>
1. <input type='text'><br>
2. <input type='text' required><br>
3. <input type='text' required disabled><br>
4. <input type='text' value="" pattern="\d*"><br>
5. <input type='text' value="" pattern="\d*" required><br>
6. <input type='text' value="" pattern="\d+"><br>
7. <input type='text' value="" pattern="\d+" required><br>
8. <input type='text' value="test" pattern="\d+" required disabled><br>
<button>check field validity</button>
</form>
I am using the html5 attribute required to valid my input. I find once the form has become invalid, it doesn't recognize when the user has typed in valid information.
For example:
<input id="name" type="text" name="username" required oninvalid="setCustomValidity('Please enter a username!')">
If the user misses this feild it highlight red and tells the user to fill it in. If they then fill it in and click submit, it tells the user to fill it in.
How do I recover my forms once they have become invalid?
It's not rechecking after declaring the form element invalid. Try adding an empty setCustomValidity string to oninput. Ie:
<input id="name" type="text" name="username" required oninvalid="setCustomValidity('Please enter a username!')" oninput="setCustomValidity('')" >
I do something similar to #Julie answer but use onchange instead of oninput ...
I use oninvalid to set the custom validty error message and then use onchange to reset the message so the form can submit properly.
<input type="number" oninvalid="this.setCustomValidity('Please enter an INTEGER')" onchange="this.setCustomValidity('')" name="integer-only" value="0" min="0" step="1">