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>
Related
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
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>
While I was doing some basic HTML I was wondering why Sublime Text 3 always completes required into required="" . Like my Instructor in an online course said it is not necessary to set required="true" or required="false" but when I set it to false it still requires it.
example code (it will require the field even if it is set tofalse):
<form>
<input type="password" name="password" required="false">
<button>Submit</button>
</form>
I hope you can clear up the confusion. Thanks for every answer.
Farcher
In HTML, the required attribute must be present (the field is required) or absent (the field is NOT required). When the attribute is present, it does not matter what value it has.
The required attribute is a boolean attribute. When specified, the element is required.
The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
About boolean attributes:
A boolean attribute without a value assigned to it (e.g. checked) is implicitly equivalent to one that has the empty string assigned to it (i.e. checked=""). As a consequence, it represents the true value.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
A common practice is to use the name of the attribute as its value:
<form>
<input type="password" name="password" required="required"><!-- this input is required -->
<input type="text" name="sometext"><!-- this input is NOT required -->
<button>Submit</button>
</form>
'Required' is a Boolean attribute. It assumes the value of true once it is present. therefore setting it to a 'false' still makes it act as though it was true.
Below is proof
<form>
<input type="password" name="password" required="false">
<button>Submit</button>
</form>
required doesn't take a boolean string. It's required if the attribute exists at all. Sublime is likely expecting some value like most attributes.
<form>
<input type="password" name="password" required="">
<button>Submit</button>
</form>
<form>
<input type="password" name="password" required>
<button>Submit</button>
</form>
However, if one is handling mouse events, for instance, using JS, they can set the "required" attribute to "True" or "False" using the ".prop()" method. e.g.
.prop("required", true)
OR
.prop("required", false)
I'm facing the well known Chrome's "not-focusable-input" error but my situation is different from the explained in the other post I could find there.
I have this error message duplicated first on a well pointed input, this input has no required attribute:
The code:
<fieldset>
<label>Total (montaje incl.)</label>
<input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>
The error:
An invalid form control with name='priceFinal' is not focusable.
While the user is filling the form this field gets its value by a js script with jquery. The user type a size in another input, the script do its maths with the size value and then put the outcome in the 'priceFinal' input with the jquery function: .val()
In the browser we can see that the input is correctly filled and no errors are displayed at that time. And with the 'novalidate' solution everything goes fine, so it couldn't be responsible for the nofocusable error, I think.
Then I got the same error with an input with no name which I didn't write and doesn't exist in my DOM:
An invalid form control with name='' is not focusable.
This is weird because the only input without name in my form is the type:submit one
<input type="submit" class="btn btn-default" value="Ver presupuesto" />
I have a few required fields but I've always checked that their are all filled when I send the form. I paste it just in case it could help:
<fieldset>
<input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos" class="cInput" required >
<input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
<input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>
<fieldset>
<input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
<input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required>
</fieldset>
The novalidate solution clears the error but it doesn't fix it, I mean there must be a way to solve it with no hacks.
Any one have any idea of what's might going on?
Thanks
I had the same problem, and everyone was blaming to the poor hidden inputs been required, but seems like a bug having your required field inside a fieldset.
Chrome tries to focus (for some unknown reason) your fieldset instead of your required input.
This bug is present only in chrome I tested in version 43.0.2357.124 m.
Doesn't happen in firefox.
Example (very simple).
<form>
<fieldset name="mybug">
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<input type="submit" name="submit" value="send" />
</fieldset>
</form>
An invalid form control with name='mybug' is not focusable.
The bug is hard to spot because usually fieldsets don't have a name so name='' is a WTF! but slice piece by piece the form until I found the culprid.
If you get your required input from the fieldset the error is gone.
<form>
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<fieldset name="mybug">
<input type="submit" name="submit" value="send" />
</fieldset>
</form>
I would report it but I don't know where is the chrome community for bugs.
Thanks to this post, I saw that my problem also rested with Chrome trying to focus on my fieldsets, instead of the input field.
To get a better response from the console:
Assign every DOM element a new name
Set every input & select style.display to 'block'
Changed the type of input[type="hidden"] elements to 'text'
function cleanInputs(){
var inputs = document.getElementsByTagName( 'input' ),
selects = document.getElementsByTagName( 'select' ),
all = document.getElementsByTagName( '*' );
for( var i=0, x=all.length; i<x; i++ ){
all[i].setAttribute( 'name', i + '_test' );
}
for( var i=0, x=selects.length; i<x; i++ ){
selects[i].style.display = 'block';
}
for( var i=0, x=inputs.length; i<x; i++ ){
if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
inputs[i].setAttribute( 'type', 'text' );
}
inputs[i].style.display = 'block';
}
return true;
}
In the console, I ran cleanInputs() and then submitted the form.
The result, from the console, was:
An invalid form control with name='28_test' is not focusable.
An invalid form control with name='103_test' is not focusable.
Then, switching over to the Web Developer "Elements" view, I was able to find "28_test" and "103_test" (both fieldsets) -- confirming that my problem was a required input field, nested inside a fieldset.
While I was writting the question I realized one thing: the value the script was putting into the 'priceFinal' field sometimes was a decimal number.
In this case the solution was to write the step attribute for this input:
... step="any" ...
Step on w3s
So this 'nofocusable' bug is not only a required and hidden fields issue, it's also generated by format conflicts.
Nach gave me the best pointer... (y) I also had a input type="number" with step="0.1" and the console shows me this error while validating: An invalid form control with name='' is not focusable.
remove the step="0.1" on the element and now the form can be validated
I had the same issue so I removed required="required" from the troublesome fields.
If you get the error when jQuery function is executed, try to put "return false" on your function, or function(e) { e.preventDefault(); ... }
i had this issue once. to fix it, add
novalidate
as an attribute to the form. e.g
<form action="" novalidate>
....
</form>
In my case, the input element did not have a required attribute but it was hidden. and the problem was while it was hidden, it had a value in it. I guess if an input field is hidden it shouldn't have a value too, aside required attribute.
When I remove the value through my javascript code, everything works fine.
Element is hidden, No required Attribute, No value. Worked
Here is the solution....
<form>
<input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>
Many people do not realize that passing false into ng-required disables the directive.
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');
});