HTML5 maxlength with new line and form submission wrong characters count

Question

<textarea maxlength="5" rows="3" name="text"></textarea>

https://jsfiddle.net/187117qq/

We can then e.g. type "12", press enter, and type "34", and then we can’t type more.

But when we submit a form with this content, request to server will contains

text=12%0D%0A34

It is 6 characters "12\r\n34", and we get validation failed on server side, because we expect 5 characters max.

Why this happens?

Is there a way to fix this? To make same validation on client and server side?

if you want o make a validation client side you could use the event oninput/onchange — Michele Dibenedetto, Dec 28 '17 at 10:01

score 1 · Answer 1 · answered Dec 29 '17 at 08:56

1

One solution will be to remove "\r" on server side before validation.

answered Dec 29 '17 at 08:56

Axel

125
1
12

But why you don't use input type text if you requored only maxlength="5" – Pravin Vavadiya Dec 29 '17 at 09:04
1

because it is an example, in production we use 1000 – Axel Dec 29 '17 at 09:11

Michele Dibenedetto · Answer 2 · 2017-12-29T05:37:10.337

0

Here you can find 2 possible solution, the first one use JS to limit the number of chars in the TEXTAREA and in the same time allows the user to input newline:

    <form action="test" method="post">
      <span>In this example the user CAN input a NEW LINE</span> 
      <textarea data-maxlength = "5" rows="3" oninput="validateMaxlength()" name="text"></textarea> 
      <span>In this example the user CANNOT input a NEW LINE. NO JS IS REQUIRED</span> 
      <button type="submit">SEND</button>
     <script>
      function validateMaxlength(e){
        var MAX_LENGTH = event.target.dataset.maxlength;
                      var currentLength = event.target.value.length;
        var length = event.target.value.replace(/\n/g,'').length;
        
        if(length>MAX_LENGTH){ 
           event.target.value = event.target.value.substr(0,currentLength-1);    }
      } 
     </script>
    </form>

The second one does not use any JS but relies on the attribute wrap="soft" which prevents the user to input new line by pressing enter.

<form action="test" method="post"> 
      <span>In this example the user CANNOT input a NEW LINE. NO JS IS REQUIRED</span>
     <textarea maxlength = "5" rows="3" wrap="soft"name="text"></textarea> 
      <button type="submit">SEND</button> 
 </form>

A couple of notes:

If the maxlength is a small number as 5 chars you might be better to use a input text
If for your users is not required to be allow to input new lines my second example should be more suitable for you
If for some reason you want to allow the user to input maxlength 5 chars and at the same time to input new lines this would an issue not fixable if your server validation allows a maximum of 5 chars. In this scenario you might be better to talk with who provides the server code

I found a similar problem where you can use keydown and use event.preventDefault() but does not look to work as good as onipunt. Take a look if is a better solution

edited Dec 29 '17 at 05:37

answered Dec 28 '17 at 10:37

Michele Dibenedetto

565
4
12

it counts 5 characters, so data are ok in this function, but on submit there are 6 characters – Axel Dec 28 '17 at 11:31
.. I not sure what you need, if you want to remove all new lines before to submit this is possibile but you are going to loose all "\n" characters, is this what you want? if the user press enter then a new line in your text are that will be loose. – Michele Dibenedetto Dec 29 '17 at 05:06
I update my answer with a second example where the user won't allow to input new line . let me know if it helps. Instead if what you want is: 1 - allow the user to input new line by pressing enter; 2 - restrict the user to non input more than 5 "real" characters; 3 - bypass the SERVER validation on 5 characters; that is not possible unless you change the server code – Michele Dibenedetto Dec 29 '17 at 05:10
I have a doubt, if the maxlength is "5" why do you need a textarea which usually is more suitable for long answer?Your user might not need to be able to input new line so maybe my second example is your solution. – Michele Dibenedetto Dec 29 '17 at 05:25
"5" is an example, you can replace by "1000", i want to limit characters in textarea by 5, new line in textarea count as 1 character, but when it is send to server, browser replace "\n" by "\r\n" so now instead of 5 characters server receive 6, and validation fail – Axel Dec 29 '17 at 08:07
I think I miss the point, is not very clear what is your expectation, if you want to restrict the user to not input "\n" or "\r\n" sending the server more than your max-length just follow my second example, otherwise I really suggest you to improve your question with more clear details so somebody else would able to give you a better help than mine. – Michele Dibenedetto Dec 29 '17 at 09:42
Using the `wrap="soft"` does _not_ prevent the user from entering newline characters. – Matt Jacobi Jun 20 '19 at 16:18

HTML5 maxlength with new line and form submission wrong characters count

2 Answers2