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>
Related
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.
If, for example, you have:
<input type="text" name="username" pattern="[a-z][a-z0-9]{2,7}">
does adding "required", as in:
<input type="text" name="username" pattern="[a-z][a-z0-9]{2,7}" required>
add any value or functionality? Everything seems to operate the same, but I'm wondering if I missed some subtlety.
In html5, "required: attribute is added to make the field mandatory. Otherwise it will throw an error on form submit.
And if you type any input value, pattern will validate accordingly.
According to Section 4.10.5.3.6. "The pattern attribute" of the HTML5 Standard the pattern is only checked if the input's value is the non-empty:
If the element’s value is not the empty string, ... and the element has a compiled pattern regular expression but that regular expression does not match the entirety of the element’s value, then the element is suffering from a pattern mismatch.
So, to prevent the submission of the form with an empty value, the required attribute is (also) required (even if an empty string does not match the pattern).
Note: this also applies to the HTML5 constraint validation API.
If the input is empty then input.validity.valid will be true and input.validity.patternMismatch will be false and unless the required attribute is also present, then input.validity.valueMissing will also be false.
[fyi: As of this writing, the API is widely supported, although IE and Blackberry mess up some aspects]
Here I have a HTML5 input.....
<input type="number" pattern="\d{10}" data-pattern-msg="enter a value according to the pattern" />
But this is not validating this pattern ......
What is the reason for this ??
Maintainer of the W3C HTML Checker (validator) here. The reason the checker is emitting an error for your example is that the HTML spec doesn’t allow the pattern attribute to be specified for <input type=number> elements; see the The following content attributes must not be specified and do not apply to the element list in the Bookkeeping details section of the section on the HTML spec on <input type=number>.
And I’m not sure that most browsers support using placeholder with <input type=number>.
This is wrong type = "number" change to type="text" and try
<input type="text" pattern="\d{10}" data-pattern-msg="enter a value according to the pattern" title="only number" />
Definition and Usage
The pattern attribute specifies a regular expression that the element's value is checked against.
Note: The pattern attribute works with the following input types: text, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
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.
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