need to add error text by using js - If user type only 3 character in the field. How to do it? Thanks
<body>
<input type="text" class="user-input" minlength="4">
</body>
You can use the pattern attribute validation.
<input pattern=".{3,}" required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">
If you want to create the option to use the pattern for "empty, or minimum length" use like below
<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}" required title="Either 0 OR (8 chars minimum)">
you could retrieve its value from the id:
let x = document.getElementsByClassName['user-input'].value;
if (x.length < 4) {
alert(`please enter at least ${x.length} characters`);
return false;
}
Related
This question already has answers here:
How to add form validation pattern in Angular 2?
(6 answers)
Closed 1 year ago.
I'm trying to create a textbox can accepts only digits while the user types in it.
I am talking about a live situation, I don't need to check it only at submitting.
To do that, I have added the following attribute to my textbox:
pattern="[0-9]*"
However, it doesn't work: I can still enter any kind of character like "a", "b" and not only "0", "1".
What is my fault here?
Thank you!
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<input class="input {{fields[$index].class}}"
ng-disabled="field.disabled != ''"
ng-required="field.name == zipcode"
ng-model="fields[$index].value"
name="{{field.name}}"
type="text"
id="{{field.name}}"
maxlength="6"
pattern="[0-9]*"
>
<label placeholder=" {{field.label}}">
</label>
You can check the validity each time text is input.
let prevVal = "";
document.querySelector('input').addEventListener('input', function(e){
if(this.checkValidity()){
prevVal = this.value;
} else {
this.value = prevVal;
}
});
<input maxlength="6" pattern="[0-9]*">
Learn more about validation here.
i have a text box in html, i want to allow user to only input following range
0-9 and NA
there are two cases
1: user inputs range form 0-9 numbers and
2: user inputs only NA (NA denotes Not applicable)
how could i allow user to do this
I try following code but it does not work
<input type = "number" autocomplete="off" class = "form-control" name="Personal_Weapons_Price" id = "Personal_Weapons_Price" required onkeyup="this.value = this.value.toUpperCase();" pattern="[^0-9NA]+" />
Add This Way oninput="this.value = this.value.toUpperCase().replace(/[^NA0-9]/, '')"
<input type="text" oninput="this.value = this.value.toUpperCase().replace(/[^NA0-9]/, '')" />
You could take the following pattern, which looks for one or more digits or NA.
^(\d+|NA)$
The correct pattern is
pattern="^(\d+|NA)$"
If you also want to match na (so you can remove the onkeyup listener):
pattern="^(\d+|NA|na)$"
Edit: if you want to write "NA", you should change the type attribute type from number to text.
<input
type="text"
autocomplete="off"
class="form-control"
name="Personal_Weapons_Price"
id="Personal_Weapons_Price"
required
pattern="^(\d+|NA|na)$"
/>
<input type="text" placeholder="Title" onkeyup="CheckLength(this.value);"/>
and in JavaScript file ,
function CheckLength(currentValue)
{
if(currentValue.length > 6)
alert("Only 6 letters are allowed, please follow the rule!");
}
what I want is after 6 characters, whatever user will type should not visible in the Text-box and should show an alert..Can you help me in this?
There is something called maxlength attribute.
The maxlength attribute specifies the maximum number of characters allowed in the element.
<input type="text" placeholder="Title" maxlength="6"/>
function CheckLength(currentValue)
{
if(currentValue.length > 5)
return false;
}
<input type="text" onkeydown="return CheckLength(this.value);"/>
Also you can add attribute maxlength to input element to restrict the number of character like
<input type="text" maxlength="6"/>
I have following two input boxes which type is "tel". maxlength is set to 10.
now,
if user insert one or both number less than of length 10, then the alert should display about wrong number.
if one number is of exact length of 10 digit and other is not, then only accept the full length number and setting other to null.
<input type="tel" maxlength="10" />
<input type="tel" maxlength="10" />
now, if both input are not of length 10, the alert should be there,
if one is of length 10 and other is not, the alert should be there like rejecting small no and continue with full length no of 10 digit.
if both no are of 10 digit, the alert should be, send both nos to proceed further.
Use This
<input type="tel" maxlength="10" id="First" />
<input type="tel" maxlength="10" id="second" />
Javascript Code
<script type="text/javascript">
var fst= $("#First").val().length;
var scd= $("#second").val().length;
if(fst==10 && scd==10){
alert("Please enter 10 chracters");
} else if(fst==10 && scd!=10){
$("#second").val('');
} else if(fst!=10 && scd==10){
$("#first").val('');
}
</script>
i'm trying to validate a credit card security number, i've set the max length to 3 but i need to make sure that the users enters at least 3 and i cant find any minlength ways to do it.
Security: <input type="text" name="secno" maxlength="3">
var n=document.forms["myForm"]["secno"].value;
if (n==null || n=="" || isNaN(n)) {
alert("Security number needed");
return false;
}
This will do:
<input type="text" name="secno" onblur="if(this.value.length < 3 )alert('At least three chars.');" maxlength="3">
Security: <input type="text" name="secno" pattern=".{3,3}" />
Would work the same as minlength=3 and maxlength=3, but keep in mind some cards have four characters, so I'd suggest
Security: <input type="text" name="secno" pattern=".{3,4}" />
What this is doing, is using the pattern attribute, which lets you s et a regular expression to validate the test