I noticed, that a form containing an <input> element is submitted, even if the <input> has a minlength attribute.
F.e. in my attached code, submitting works when no value is entered, but it fails if the length of the entered value is less than fife.
Why does it behave like this?
In my opinion the browser should prevent a submit when the minlength requirement is not met.
<form>
<label>Name:</label>
<input type="text" minlength="5">
<button type="submit">Submit</button>
</form>
It is nature of minlength.
By adding minlength="5", the value must either be empty or five characters or longer to be valid.
If you want to avoid empty case you need to use required.
More details here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength
Why does it behave like this?
… because it was designed that way.
If a field is required then make it required.
Related
Consider the following form:
<form>
<input type="text" minlength="5" value="1234">
<button type="submit">submit</button>
</form>
When I click the submit button without changing anything, the minimum length validation doesn't work and the form submits successfully.
But after changing the input value, e.g. 1234 -> 12345 -> 1234, the validation works and the form does not get submitted.
Why?
This is by design. The minlength attribute only validates a field once it has been edited by the user. It doesn't validate the field if its value hasn't been changed, even if that value doesn't meet the constraint. From the spec (emphasis mine):
Constraint validation: If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the JavaScript string length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.
If you need to validate the value regardless of whether the user has since edited the field, see Racil Hilan's answer (although their statement about the minlength attribute not being supported everywhere doesn't imply anything and is largely irrelevant — as shown, this is clearly by design; if anything it shows that the browsers that do support the attribute support it fully).
The minlength attribute is not supported in all browsers. You can use the pattern attribute instead. The required attribute is also needed, otherwise an input field with an empty value will be excluded from the validation.
Try this:
<form>
<input type="text" pattern=".{5,}" required value="1234">
<button type="submit">submit</button>
</form>
The added benefit of using the pattern attribute is that it validates initial values, so you will not have the issue that you've seen with the minlength attribute which doesn't validate initial values (as explained in details by BoltClock's answer). The downside, though, is that the validation message is not as elegant. For example, the message in Chrome is "Please match the requested format" for pattern and "Please lengthen this text to 5 characters or more" for minlength.
You can use placeholder="1234" instead of value="1234" and don't forget to put "required" into your input field. So it works after
<form role="form">
<input type="text" name="number" minlength="5" placeholder="1234" required>
<button type="submit">submit</button>
</form>
I read about value attributes documentation here. It does not clearly mention why is it required for the input tag.
According to the documentation
"value attribute specifies the value of an element" what exactly does it mean by "value"?
Is it a just for humans to know what exactly a checkbox is for?
Or does the value has anything to do with the backend database?
Is the value attribute just for front end purpose only?
I know this question has been asked previously, but not all aspects of what a "value attribute" is were discussed. So I would like to raise the question again, and have another discussion about it.
Is it a just for humans to know what exactly a checkbox is for?Does value attribute is just for frontend purpose only?
The value property sets or returns the value of the value attribute of a checkbox/radiobutton.
For checkboxes and radiobuttons, the contents of the value property do not appear in
the user interface. The value property only has meaning when
submitting a form. If a checkbox/radiobuttons is in checked state when the form is
submitted, the name of the checkbox/radiobuttons is sent with along with the value
of the value property (if the checkbox/radiobuttons is not checked, no information
is sent).
For example, when you are using <input type="button" name="foo" value="Click"/>, this will assign name 'Click' to your button. Same goes for text field: <input name="subject" type="text" value="Default text" /> will show you a text field with 'Defaul text' in it.
Value is where the actual value of the field is stored. Try changing it with jQuery or even with firebug and you will see that the submitted value will be changed!
Given <input type="checkbox" name="foo" value="bar"> the submitted data for the checkbox will be foo=bar if the form it is inside is submitted and the checkbox is successful (the main additional criteria for which is that it is checked). The server side form handler can then use that information.
The value is not exposed to the user of the browser (unless they use a developer tool of some kind). That is the job of the <label> element.
I have several textboxes on the form that are marked with required="required" attribute (html5).
There are two buttons. The first button should cause validation, the second should not.
ValidationGroup doesn't work in this case.
How is it possible to solve this issue?
UPD: To use required attribute is the requirement so I cannot avoid it.
<input type=submit formnovalidate>
Submits the form without validation.
I am using the the "GET" method in a form on my website. For some reason it is passing the value of the submit button to the url. Why is this happening? What am I doing wrong?
Form:
<form method="GET" action="searcht1.php">
<input type="text" name="search"/>
<input type="submit" name="submit">
</form>
Url:
searcht1.php?search=colin+pacelli&submit=Submit
It's supposed to happen. If you don't want that, do not define name attribute on the button. You probably want value instead, to show the user what the button is for.
Also, this question has nothing to do with PHP; it is purely about HTML semantics.
The reason is that the name attribute makes the submit button a “successful control” (in HTML 4.01 terminology) when it is used for form submission. This causes the name=value pair from it to be included in the form data.
Note that in your case, this data is name=foo where foo is the browser-dependent default value of the button. It could be submit, or it could be Lähetä kysely, or something exotic. You can, and normally should, use the value attribute to set this value, since it determines the text displayed in the button. It’s usually not desirable to have a submit button on your English-language appear with e.g. some text in Japanese just because a Japanese-language browser is being used.
So as others have written, the solution (if this is a problem) is to remove the name attribute. But since the value attribute should normally be used, you can make two changes simultaneously by just replacing the attribute name name by the name value, though you might also capitalize the word shown:
<input type="submit" value="Submit">
Try to remove name attribute from submit input
remove the name attribute of the button.....
Is it guaranteed that a browser doesn't send an input element if it doesn't have the name attribute specified?
For example, can we assume that POSTing the form below won't send the credit card number?
<form action="/process" method="post">
<input id="credit-card-number" type="text">
<input type="submit" name="commit" value="Go">
</form>
Is it guaranteed that a browser doesn't send an input element if it doesn't have the name attribute specified?
Yes (unless you muck about with JavaScript to change that).
The specification is quite clear that controls without names cannot be successful.
A successful control must be defined within a FORM element and must have a control name.
The standard says that to send an input it should be a successful "control."
If a control doesn't have a name it's not a successful "control," so it should not be sent.
See http://www.w3.org/TR/html401/interact/forms.html