textboxes not behaving the same

[bduguay]

Hi,

I have created a form with several textboxes on it. I have set the maxLength attribute in them, yet only 1 of the textboxes will stop when the maximum number of characters has been reached.

My html

Code:

<table>
    <tr>
        <td>Deviation Order number:</td>
        <td>
            <input id="deviationOrderNumber" class="easyui-textbox" style="width:300px;padding:5px" maxLength="20" data-options="prompt:'Deviation Order Number',iconCls:'icon-qty-rank',iconWidth:38">
        </td>
    </tr>
    <tr>
        <td>Deviation ASN number:</td>
        <td>
            <input id="deviationASNNumber" class="easyui-textbox" style="width:300px;padding:5px" maxLength="20" data-options="prompt:'Deviation ASN Number',iconCls:'icon-material-services',iconWidth:38">
        </td>
    </tr>
</table>

The HTML I retrieved from firebug in firefox. As you can see the span class for the deviationOrderNumber field contains the maxlength yet the span class for the deviationASNNumber field does not.

Code:

<table>
<tbody>
<tr>
<td>Deviation Order number:</td>
<td>
<input id="deviationOrderNumber" class="easyui-textbox textbox-f" style="width: 300px; padding: 5px; display: none;" maxlength="20" data-options="prompt:'Deviation Order Number',iconCls:'icon-qty-rank',iconWidth:38">
<span class="textbox" style="width: 298px;">
<span class="textbox-addon textbox-addon-right" style="right: 0px; top: 0px;">
<input id="_easyui_textbox_input111" class="textbox-text validatebox-text" autocomplete="off" tabindex="" style="text-align: start; padding: 0px 5px; margin: 0px 38px 0px 0px; height: 24px; line-height: 24px; width: 250px;" placeholder="Deviation Order Number" maxlength="20" type="text">
<input class="textbox-value" value="12334568790798709870" type="hidden">
</span>
</td>
</tr>
<tr>
<td>Deviation ASN number:</td>
<td>
<input id="deviationASNNumber" class="easyui-textbox textbox-f" style="width: 300px; padding: 5px; display: none;" maxlength="20" data-options="prompt:'Deviation ASN Number',iconCls:'icon-material-services',iconWidth:38">
<span class="textbox" style="width: 298px;">
<span class="textbox-addon textbox-addon-right" style="right: 0px; top: 0px;">
<input id="_easyui_textbox_input4" class="textbox-text validatebox-text" autocomplete="off" tabindex="" style="text-align: start; padding: 0px 5px; margin: 0px 38px 0px 0px; height: 24px; line-height: 24px; width: 250px;" placeholder="Deviation ASN Number" type="text">
<input class="textbox-value" value="12314654654946132165365" type="hidden">
</span>
</td>
</tr>
</tbody>
</table>

The javascript I got from here http://www.jeasyui.com/forum/index.php?topic=4030.0 to only allow the maxLength characters in the field.

Code:

/** This will override the Textbox rules. */
$.extend($.fn.textbox.defaults.rules, {
	maxLength: {
		validator: function(value, param){
			return value.length <= param[0];
		},
		message:
			'Maximum characters allowed only {0}'
	}
});

I've included the image with the data in the field. The deviationOrderNumber field prevents the number of characters from passing 20 yet the other field will not prevent more than 20 characters.

Any help would be appreciated.
Thank you.

[stworthy]

The textbox hasn't the 'maxLength' property. You have to append it by yourself.

Code:

$('#deviationOrderNumber').textbox('textbox').attr('maxlength', $('#deviationOrderNumber').attr("maxlength"));
$('#deviationASNNumber').textbox('textbox').attr('maxlength', $('#deviationASNNumber').attr("maxlength"));

[bduguay]

Great! Thank you.