Validate the textbox for length - javascript

<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"/>

Related

event on minimum length using js

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;
}

How to apply space in value of <input type="number">?

I am trying to add space in <input type="number"> value in html.
But whenever i add space in value like this value="0401 889 889" than there is nothing appear in <input type="number">.
Without adding a blank space
If i am not add blank space in <input type="number">'s value than its works fine.
<input type="number" value="0401889889">
After adding a blank space in ``
<input type="number" value="0401 889 889">
What i exactly want
<h2>Without adding a space in value</h2>
<input type="number" value="0401889889">
<h2>With adding a space in value</h2>
<input type="number" value="0401 889 889">
Instead, you can use this
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Check this answer : https://stackoverflow.com/a/25121813/14050736
You'll have to modify the regex a bit according to the group of number you desire
Edit : I just noticed : Your input must be in "text" not "number"
If you want to prevent users from typing alphabetic characters you need to set an event listener for the "input" event that delete invalid characters from the value on-the-fly:
const phone = document.getElementById('phone');
phone.addEventListener('input', (event) => {
// delete any character that is not a digit or a space
event.target.value = event.target.value.replace(/[^0-9^ ]/gi, '');
});
// or, if you have more than one input of type "tel" (e.g. mobile and landline)
const phones = document.querySelectorAll('input[type=tel]');
phones.forEach(phone => phone.addEventListener('input', (event) => {
event.target.value = event.target.value.replace(/[^0-9^ ]/gi, '');
}))
<input type="tel" id="phone" name="phone" placeholder="0401 889 889" pattern="[0-9]{4} [0-9]{3} [0-9]{3}">
<input type="tel" id="mobile" name="mobile" placeholder="0401 998 998" pattern="[0-9]{4} [0-9]{3} [0-9]{3}">

Allow only numbers with only specific alphabets in textbox

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)$"
/>

dijit ValidationTextBox how to add minlength and maxlength

I would like to know how (with simple working example) to add maxlength and minlength to input tag generated by
dijit/form/ValidationTextBox
Example of desired output:
<input maxlength="10" minlength="2" class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" name="title" type="text" tabindex="0" id="Image-1-title-LabelValidationTextBox" aria-required="undefined" value="Title text for image Image-1" aria-invalid="false">
try this example with regex constraint
<input type="text" value="someTestString" required="true"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="regExp: '[a-zA-Z0-9$%!_]{2,10}', invalidMessage: 'The value must be at least 2 character and maximum 10'" />
ValidationTextBox has the properties minLength and maxLength. They are used in the following why in a declarative manner.
<input data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="required:true,
maxLength:5,
minLength:2"
type="text"
name="exmaple" />
Here's another solution:
registry.byId("validationTextBox").validator = function(value, constraints) {
if(value) {
return value.length >= 2 && value.length <= 10;
}
return true;
}

how to filter inputs before sending it to a xmlhttp request?

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>

Categories

Resources