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)$"
/>
Related
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;
}
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}">
<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'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
I have a form with field names that are generated dynamically by server side code.
I am attempting to allow JQuery to manipulate the value of these fields, but am running into trouble.
The generated fields are paired using a unique ID number Example:
A radio button named option_3030
Will have a amount_3030 field
The number of dynamically created fields is also an unknown (there might be one or ten input pairs -- all named option_xxxx and amount_xxxx.
What I'm trying to do is use jquery to set the value of the 3030_amount field when the 3030_option is checked (or unchecked). The problem is, I don't know ahead of time what the actual id number will be.
Any suggestions?
Thanks,
David
One option is to use classes:
<input type="radio" id="3030_Option" class="option" />
<input type="text" id="3030_amount" class="amount" />
<script>
$(function() {
$('.option').click(function() {
$(this).next('.amount').val('new value goes here')
})
})
</script>
By the way starting html ids with numbers is technically not allowed:
ID and NAME tokens must begin with a
letter ([A-Za-z]) and may be followed
by any number of letters, digits
([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods (".")
You can grab the id attribute and take the number from it:
$('input[type=radio]').change(function()
{
var id = this.id.split(/_/)[1];
var amount = $('input[name=amount_' + id + ']');
amount.val(123);
}
If you bind your event with a class, and then parse the id of the clicked element to get the numerical identifier to use for the text field.
<input type="radio" id="3030_Option" class="option" />
<input type="text" id="3030_amount" class="amount" />
<input type="radio" id="3031_Option" class="option" />
<input type="text" id="3031_amount" class="amount" />
$('.option').click(function() {
var id = $(this).attr('id');
var num = id.substring(0, id.indexOf('_'));
$('#' + num + '_amount').val('value');
});
As pointed out by others, numerals are not valid as the initial character of an id. It would be better to suffix them. In which case the code needs modifying slightly.
<input type="radio" id="Option_3030" class="option" />
<input type="text" id="amount_3030" class="amount" />
<input type="radio" id="Option_3031" class="option" />
<input type="text" id="amount_3031" class="amount" />
$('.option').click(function() {
var id = $(this).attr('id');
var num = id.substring(id.indexOf('_') + 1, id.length);
$('#amount_' + num).val('value');
});
Mhh i think you could try to register the javascipt function while generating the code. I have done somthing similar with a gridview.
generatedControl.Attributes.Add("onchange", "jqueryFunction(" generatedId ")" );