Bad value number for attribute value on element input - html

I am getting this error "Bad value number for attribute value on element input: Expected a minus sign or a digit but saw n instead" for this HTML code <label for='Card_Number'>Card Number:</label> <input type='number' id='Card_Number' name='Input_card_number' value='number' placeholder='0000-0000-0000-0000'>. Please how do i go about this?

You have an input with type=number but then you set the value to a string, here: value=number. I believe what you want to do is:
<label ...>...</label>
<input type='text' id'Card_Number' ... placeholder='0000-0000-0000-0000' />
and then think about using pattern or have type number, but then no - in your input

Related

indexOf in HTML with min length

I have some element containes alphabates & number as input example :- 12EDFG3456 , 73WERTY1234 etc.
All these elements starts with number and then contains some alphabates + Number.
In HTML , while creating frontend, we have used minLength method which will check first , the length of these elements which is fine.
I am trying to keep one more check where we are making sure elements start with Numbers.
Can we use index (to check index place 0 ) and check if it is number , if yes then check minLengh and so on.?
<mat-label> element </mat-label>
<input matInput minlength ="10" maxlength ="12" name= "traNum formControlName ="traNum">
You can use the “pattern” attribute, like so:
<form>
<input type="text" minlength="10" maxlength="12" pattern="[0-9].+">
<input type="submit">
</form>

input type number - wrong number format if decimal places are .00

I have input fields that hold currency values (decimal value with 2 decimal places).
If the input has a value 1.34 it is displayed correctly as 1,34 (lang attribute is "de").
If the input has a value 2.00 it is formatted and still shown as 2.00. As soon as the value is changed to something other than .00 it is again displayed correctly with a comma.
output is correctly formatted <input type="number" name="dec1" value="1.99" step="any" lang="de" /><br /> output is wrong formatted <input type="number" name="dec3" value="1.00" step="any" lang="de" />
So far I can only reproduce this behaviour in Firefox.
Chrome and Safari seem to work fine.
JSFiddle for reference.
Try this,
<input type="text" id="dec1" onBlur="handler(ev)"/> var handler = (ev) { document.getElementById("dec1").value = ev.target.value.replace(/./g, ","); }

Validation of the input fields

I have two input fields as shown below
<input type="number" name="number" placeholder="Enter minimum price">
<input type="number" name="number" placeholder="Enter maximum price">
<input type="submit">
want to validate always first input value must be less than the second input value.
You can Set it manually in html by max = "" min = "" in both field
or You can validate it in your function which is better way to handle it

To allow only one numeric value in text box based on regular expression in AngularJs

I'm using ng-pattern :
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="/^[4]*$/" required only-digits>
Please let me know what to do that it does not accept any other numbers except 4. I am using directive for digits that is only-digits.
EDIT: SORRY WRONG ANGULAR VERSION - but if you can transform this to angularjs it will be work!
You can use (input) event in you HTML input element
<input type="number" (input)="check($event)">
Than in your ts you cehck value of input
check(event) {
console.log(event);
if (+event.data !== 4) {
event.target.value = '';
}
}
The pattern which you are mentioned is not a valid regex pattern. Instead of that try to use this /^([4]){1}?$/ Hope you will get it.
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="/^([4]){1}?$/" required only-digits>
Try to use below restrict pattern :
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="^[4]{1}?$" required only-digits>
And below validation message :
<div ng-messages="myForm.price_field.$error">
<span ng-message="pattern">Not a valid number!</span>
</div>

HTML Input - already filled in text

I was wondering, is there a way to put text into an input field?
What i've got now is a placeholder, but that's actually an empty inputfield. So that's not what i'm looking for.
I'm looking for an (kind of) placeholder that's actually filled in into the input field, so not "background text"
This is with placeholder:
And this is what i want:
Is there any way to do this?
The value content attribute gives the default value of the input element.
- http://www.w3.org/TR/html5/forms.html#attr-input-value
To set the default value of an input element, use the value attribute.
<input type="text" value="default value">
All you have to do is use the value attribute of input tags:
<input type="text" value="Your Value" />
Or, in the case of a textarea:
<textarea>Your Value</textarea>
You seem to look for the input attribute value, "the initial value of the control"?
<input type="text" value="Morlodenhof 7" />
https://developer.mozilla.org/de/docs/Web/HTML/Element/Input#attr-value
<input type="text" value="Your value">
Use the value attribute for the pre filled in values.
TO give the prefill value in HTML Side as below:
HTML:
<input type="text" id="abc" value="any value">
JQUERY:
$(document).ready(function ()
{
$("#abc").val('any value');
});