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)
Related
Value of filename is being manually inserted using this
<input type="file" ngf-select ng-model="file" name="file" id="file" onchange="document.getElementById('fileName').value = this.value.split('\\').pop().split('/').pop()" required>
Filename is being injected into fileName field using the file a user chooses. Validation fails as it treats that field as still being empty until I at least insert one more character. What can I do to fix that?
This is the validation part
<p ng-show="fileNameForm.fileNameInput.$error.required && fileNameForm.fileNameInput.$touched" class="help-block">File name is required.</p>
And the actual text field
<input name="fileNameInput" class="form-control" type="text" id="fileName" ng-model="document.fileName" ng-maxlength="255" required>
on change will not be evaluated if the model is changed programmatically and not by a change to the input value
you can use $scope.$watch to detect changes on ng-model
$scope.$watch('document.fileName', function(newValue, oldValue) {
//if(newValue not valid)
// display validation error
});
I have an input type for contact number:
<input type="number" name="usercontact" placeholder="Contact Number" pattern="[0-9]{8,20}" />
I already put the pattern [0-9]{8,20} and i assume it don't allow other characters
But somehow e, and . (dot) able to pass through, why so? How should i only allow numbers only?
Try this
<input
type="number"
name="username"
placeholder="Username"
pattern="[0-9]{1,15}"
id="username">
Input type number can accept e or E and floating point numbers , negative symbols.
Pattern can be used for the validation.You can check if the entered value is valid.
According to This the pattern attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.But this works in some browser.
$('#numericInput').on('change keyup', function(event) {
if ( event.target.validity.valid ) {
$('#errorMsg').text($(this).val());
} else {
$('#errorMsg').text('invalid');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="number" name="usercontact" placeholder="Contact Number" pattern="[0-9]{8,20}" id="numericInput" />
<p id="errorMsg"></p>
<button type="submit">submit</button>
</form>
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');
});
What is the correct value for the disabled attribute for a textbox or textarea?
I've seen the following used before:
<input type="text" disabled />
<input type="text" disabled="disabled" />
<input type="text" disabled="true" />
For XHTML, <input type="text" disabled="disabled" /> is the valid markup.
For HTML5, <input type="text" disabled /> is valid and used by W3C on their samples.
In fact, both ways works on all major browsers.
HTML5 spec:
http://www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute :
The checked content attribute is a boolean attribute
http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes :
The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
Conclusion:
The following are valid, equivalent and true:
<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="disabled" />
<input type="text" disabled="DiSaBlEd" />
The following are invalid:
<input type="text" disabled="0" />
<input type="text" disabled="1" />
<input type="text" disabled="false" />
<input type="text" disabled="true" />
The absence of the attribute is the only valid syntax for false:
<input type="text" />
Recommendation
If you care about writing valid XHTML, use disabled="disabled", since <input disabled> is invalid and other alternatives are less readable. Else, just use <input disabled> as it is shorter.
I just tried all of these, and for IE11, the only thing that seems to work is disabled="true". Values of disabled or no value given didnt work. As a matter of fact, the jsp got an error that equal is required for all fields, so I had to specify disabled="true" for this to work.
In HTML5, there is no correct value, all the major browsers do not really care what the attribute is, they are just checking if the attribute exists so the element is disabled.
From MDN by setAttribute():
To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which results in the button being disabled.
Link to MDN
Solution
I mean that in XHTML Strict is right disabled="disabled",
and in HTML5 is only disabled, like <input
name="myinput" disabled>
In javascript, I set the value to
true via e.disabled = true;or to "" via setAttribute( "disabled", "" );
Test in Chrome
var f = document.querySelectorAll( "label.disabled input" );
for( var i = 0; i < f.length; i++ )
{
// Reference
var e = f[ i ];
// Actions
e.setAttribute( "disabled", false|null|undefined|""|0|"disabled" );
/*
<input disabled="false"|"null"|"undefined"|empty|"0"|"disabled">
e.getAttribute( "disabled" ) === "false"|"null"|"undefined"|""|"0"|"disabled"
e.disabled === true
*/
e.removeAttribute( "disabled" );
/*
<input>
e.getAttribute( "disabled" ) === null
e.disabled === false
*/
e.disabled = false|null|undefined|""|0;
/*
<input>
e.getAttribute( "disabled" ) === null|null|null|null|null
e.disabled === false
*/
e.disabled = true|" "|"disabled"|1;
/*
<input disabled>
e.getAttribute( "disabled" ) === ""|""|""|""
e.disabled === true
*/
}