This question already has answers here:
HTML 5 - number regular expression
(5 answers)
Closed 5 years ago.
Please i have a field that enables user to enter numeric field. Thus,
<input class="form-control input-sm" id="first" name="first" onkeyup="calculate();javascript:checkNumber(this);" $type="text" value="<?php echo (isset($cur)) ? cur->FIRST : 'FIRST' ;?>">$
I want a number limitation let say from 0-30 on that field where by you can type number above 30.
<input class="form-control input-sm" id="first" name="first" onkeyup="calculate();javascript:checkNumber(this);" type="text" value="<?php echo (isset($cur)) ? $cur->FIRST : 'FIRST' ;?>">
With Simple Form and input tag you can do:
<form>
Quantity (between 1 and 30):
<input type="number" name="quantity" min="1" max="30"><br> </form>
Related
Is it possible to add leading and ending symbols or text to input field which cannot be removed?
I am trying to have a $ at the beginning and % at the end of two fields. Similar to the input fields on this website: https://www.nerdwallet.com/mortgages/mortgage-calculator
<input type="text" maxlength="12" name="purchasePrice" data-name="purchasePrice" placeholder="$200,000" required="">
<input type="text" maxlength="3" name="rate" data-name="rate" placeholder="2%" required="">
This question already has answers here:
CSS selector to match elements by attribute's name start
(2 answers)
Closed 1 year ago.
For example I have these attributes in my html file <input type="number" data-input-primary-people /> and <input type="number" data-input-primary-amount /> how to select these starting with data-input-primary-
You can use spread operator and filter like this:
var res = [...document.querySelectorAll("*")].filter(t => [...t.attributes].filter(({ name}) => name.startsWith("data-input-primary-")).length > 0)
console.log(res);
<input type="number" data-input-primary-people" />
<input type="number" data-input-primary-amount" />
<input type="number" data-input-primary1-amount" />
I'm trying to add validation for an input field with vue-form-wizard.
It needs to be a min and max length of 6.
<input
type="text"
class="form-control"
:class="hasError('vcode') ? 'is-invalid' : ''"
placeholder="Enter your 6 digit code"
minlength="6"
maxlength="6"
v-model="formData.vcode"
/>
The validation isn't working for this. What am I doing wrong?
This question already has answers here:
Number input. HTML
(3 answers)
Closed 3 years ago.
i make the sum between one form to another form and the number entered has a comma. I want to make an alert that cannot be input by letters. how can i do this?
input code
<input id="weight" class="form-control form-control-sm" type="text" name="weight" onkeyup="sum();" required />
<input id="runner" class="form-control form-control-sm" type="text" name="runner" onkeyup="sum();" required />
<input id="gross" class="form-control form-control-sm" type="text" name="gross" value="0" readonly />
this is my script
function sum() {
var txtFirstNumberValue = document.getElementById('weight').value;
var txtSecondNumberValue = document.getElementById('runner').value;
var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('gross').value = result;
}
}
Supposing that you are using modern web browser you will only need to do this:
<input id="weight" class="form-control form-control-sm" type="number" name="weight" onkeyup="sum();" required />
type="number" is sufficient.
I have a HTML form field to get the month from the user.
<input type="text" placeholder="MM" size="2" name="month">
I need the field to accept only 2 digits. I tried Form validation, but it allows the user to enter more than 2 digits and then display the validation message. I don't need any validation messages for the field, but the user should be restricted to enter only 2 digits max. Is there a way we can do this using jquery?
<input type="text" placeholder="MM" size="2" name="month" maxlength="2>
The maxlength attribute;
<input type="text" placeholder="MM" size="2" maxlength="2" name="month">
It limits the amount of text you can enter by straight up not allowing you to type more.
EDIT: added snippet
The easiest is using the type='number' attribute and setting max='12':
<input type='number' max='12' min='1'>
SNIPPET
input {
width: 4ex;
padding: 0 1px;
}
input:last-of-type {
width: 6.5ex;
}
<fieldset>
<legend>Enter Date</legend>
<label>Month:</label>
<input type='number' max='12' min='1'>
<label>Day:</label>
<input type='number' max='31' min='1'>
<label>Year:</label>
<input type='number' max='3000' min='2016'>
</fieldset>
This should help you out, whenever the user presses the key down it will check the lenght and then trim the extra chars if there are any:
$("input").keydown(function() {
var value = $(this).val();
if(value.length > 2) {
value = value.substring(0, 2);
$(this).val(value);
}
});