I have a contest entry page on my company's website. In order to enter the contest, you create a login, which is just an email and a 4-digit pin. Here's the PIN field:
<input type="password" name="contest_pin" id="contest_pin" maxlength="4" />
When users submit the form, the account is created in our database, and then they get an email (which I'm copied on) that contains the email address and PIN they created.
Here's the issue: in every browser I've tested (Safari/Chrome/Firefox on Mac, Chrome/Firefox on Linux, IE7/8/9 on Windows) I CANNOT enter more than 4 digits into that PIN field. And yet, several of the emails I've received show that the user has created a pin with more than 4 characters.
How is this possible? Are there browsers that don't support maxlength? I haven't tested in Opera, or on any of the mobile browsers. It's not a huge deal if their pin is longer than 4 digits; the database will accept more. I'm just wondering how they managed to get around maxlength.
EDITED TO ADD
There are too many answers basically saying the same thing for me to respond individually to all of them. I KNOW that I should always do server-side validation for anything important, and we do have PHP code in place sanitizing our data, and if it was hugely important I would also have PHP code enforcing the 4-digit limit. It's not that important to us that they be only 4 characters, so I haven't enforced it. I'm just wondering why the maxlength property is not doing what it's designed to do, which is prevent users from entering more than a certain number of characters. For those of you that suggested malicious scripts or Firebug, I can be 100% certain this is not the case. Only registered users of our site (which is limited to a very specific corporate membership list) can even get to the contest entry page, and I can guarantee that none of the approximately 100 people on that list are going to be deliberately trying to circumvent an input type property.
There is no native max-length attribute for textareas.
The maxlength attribute defines the maximum number of characters (as UTF-16 code units) the user can enter into an <input> or <textarea> . This must be an integer value 0 or higher. If no maxlength is specified, or an invalid value is specified, the input or textarea has no maximum length.
The HTML <Textarea>maxlength attribute is used to specify the maximum number of characters enters into the Textarea element. Attribute Value: number: It contains single value number which allows the maximum number of character in Textarea element. Its default value is 524288.
Use the maxLength prop to set a character limit on an input field in React, e.g. <input maxLength={5} /> . The maxLength attribute defines the maximum number of characters the user can enter into an input field or a textarea element.
They very likely are bots that read field names and create GET and POST requests based on those rather than using the HTML form like a normal human user would.
This is why client-side validation of form is never enough to ensure data is correct. Client-side validation is nice as it's responsive for end users, but it's not able to prevent bad data from arriving at your server's doorstep.
As an example, let's say I have an input field in a form whose action is GET. My input field's maxlength is 4. When I press submit, I see the URL ending with ?field=1234
. There's nothing stopping me from updating that URL to ?field=123456789
and pressing enter. Similar things can be done with POST actions, but a tool is needed to do it.
I believe that every browser supports it, here's a few links for reference :
Maxlength | SitePointReference
Maxlength | W3 Schools
Obviously there are way around this - you should ensure you ALWAYS have adequate server-side validation, as client-side usually isn't enough on it's own.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With