maxlength not working on some elements

Question

Okay, so I'm building a custom signup page, and of course there is javascript input validation involved.

In that validation I'm using the maxlength property, to validate the length of the input - it's kind of a double security, but it was so easy to get the property of the element I thought "why not?".

However, I discovered that the attribute was undefined on some of my form input elements, and correctly defined on others.

I've been looking at the HTML for several days now, and I can't figure out why it is not defined on some of the elements, but works on most.

I've constructed a page where both the working and non-working elements exist, although it is not how it is supposed to be put together in the end.

Here is a link to that, and below is an example of the non-working form. I hope some of you guys can see what's wrong with it!

Code:

<div id="9irBGsdLR">
    <form method="POST" class="form" name="frontContent" id="forntContent" style="margin-bottom:15px;">
    <div id="9button" style="float:right;">
        <img onclick="deleteElement(&#39;9&#39;, &#39;9irBGsdLR&#39;, this, &#39;actions/delete.php&#39;)" alt="delete" style="border:0px;float:right;cursor:pointer;" src="./validationNotWorking_files/close_32.png">
    </div>
    <input type="text" name="id" style="display:none;" value="9">
    <label class="inputlabel softInputlabel" style="width:20%;">Headline: </label>
    <input maxlenght="50" type="text" name="title" id="title" class="inputfield" contenttype="text" value="Praesent rhoncus faucibus elementum">
    <label class="inputlabel softInputlabel" style="width:20%;">Succession: </label>
    <input maxlenght="4" type="text" name="succession" id="title" class="inputfield" contenttype="numerical" value="50">
    <label class="inputlabel softInputlabel" style="width:20%;">Content: </label>
    <textarea class="formField" style="width:75%;height:300px;" name="content"></textarea>
    </form>
    <hr>
</div>

Answer 1

There is no such thing as maxlenght - use maxlength instead.

Here's a jsFiddle.

HTML:

<div id="9irBGsdLR">
    <form method="POST" class="form" name="frontContent" id="forntContent" style="margin-bottom:15px;">
        <div id="9button" style="float:right;">
            <img onclick="deleteElement(&#39;9&#39;, &#39;9irBGsdLR&#39;, this, &#39;actions/delete.php&#39;)" alt="delete" style="border:0px;float:right;cursor:pointer;" src="./validationNotWorking_files/close_32.png">
        </div>
    <input type="text" name="id" style="display:none;" value="9">
    <label class="inputlabel softInputlabel" style="width:20%;">Headline: </label>
    <input maxlength="50" type="text" name="title" id="title" class="inputfield" contenttype="text" value="Praesent rhoncus faucibus elementum">
    <label class="inputlabel softInputlabel" style="width:20%;">Succession: </label>
    <input maxlength="4" type="text" name="succession" id="title" class="inputfield" contenttype="numerical" value="50">
    <label class="inputlabel softInputlabel" style="width:20%;">Content: </label>
    <textarea class="formField" style="width:75%;height:300px;" name="content"></textarea>
    </form>
    <hr>
</div>