PDA

View Full Version : TextField setMaxLength validation



Vesna
1 Sep 2009, 8:15 AM
The TextField is restricted with a maxLength:

TextField<String> name = new TextField<String>();
name.setMaxLength(10);

That validation (of more than 10 characters) is done after the user leave the field, and the field is marked as invalid. The user can type more than 10 characters.
The behavior I need is to prevent them of typing more than 10 characters. Isn't that how the maxLength is supposed to work?
How can I achieve this?

suresh.sivanantham
1 Sep 2009, 9:24 AM
final TextField<String> t = new TextField<String>();
t.addListener(Events.KeyPress, new KeyListener(){
@Override
public void handleEvent(ComponentEvent e) {
if (t.getValue().length() > 5)
e.stopEvent();
}
});

Vesna
1 Sep 2009, 1:49 PM
Thanks for the response.
The problem I found out with that code is that after the event is stopped, nothing can be done with the value, not even delete or backspace can be pressed, and the value cannot be overridden as well.
So what I am doing for now is:
On KeyUp event if the "length > ___" I am switching the value back.

final TextField<String> t = new TextField<String>();
t.addListener(Events.KeyUp, new KeyListener(){
@Override
public void handleEvent(ComponentEvent e) {
if (t.getValue().length() > 5)
String subStr = t.getValue().substring(0, 5);
e.stopEvent();
t.setValue(subStr);
}
});
Since the value is never bigger than 5, practically event is never stooped and the user can press any button including delete and all others.
The only problem I found with this technique is that after the 5th character, the user for very short time see what he types and that new typed value is deleted.
If someone find more natural way of doing this, please let me know.
I do not know how before the Key is pressed to check the new length and than cancell that key pressed operation.

Feltros
1 Sep 2009, 2:29 PM
Since theres no way to tell what the user pressed before the value ends up in the box that I know of (to tell if it was a letter/symbol or a backspace) I can't see you getting better functionality this way.
A lot of forums have this feature where they only let you type 500 words into a box and then it stops, maybe look into how thats done in HTML and it may give some clues as to how you can do it in GXT.

Personally though I think that functionality is quite intuitive/cool, the user sees that they've gone over the limit and the things they type over the limit will be deleted. It also presumably means if someone tried to paste a 20character long string in it'd be cut to X characters?

Arno.Nyhm
2 Sep 2009, 2:32 AM
or you can set the "maxlength" html property by yourself which takes the requested functionality:

see http://www.w3schools.com/tags/att_input_maxlength.asp


PS: but i dont like this. i prefer the red invalid mark.
for example: if you make internet banking and copy a account number which you get sometimes via email with spaces and paste in this number into the field then with this setting it cut out the last numbers. so you have copy this number to a editor - remove the spaces and then you can copy it to the banking form. :-(

Vesna
2 Sep 2009, 6:34 AM
SOLVED:

Thanks to everybody who contribute to find the best solution.
The issue was: if the TextField has set maxLength (ex: 5) I want to stop the user for even typing the 6th character.
The solution was to add into TextField HTML: maxlength = "50".

I have my class that extend TextField:


public class MyTextField extends TextField {

private int _maxLength;

....(constuctor code here)....
.....

@Override
public void setMaxLength(int maxLength) {
super.setMaxLength(maxLength);
_maxLength = maxLength;
}

@Override
protected void afterRender() {
super.afterRender();

getInputEl().setElementAttribute("maxlength", _maxLength);
}

}
Works like a charm.
Do not forget when you create your "custom textField, to set the maxLength.

Arno.Nyhm
2 Sep 2009, 8:27 AM
you dont need to remember the value in _maxLength because you have it also in getMaxLength

but you forgot to change it after its rendering. like the super.sexMaxLength it should be possible to change it also after rendering:


public class RestrictedTextField extends TextField {

public RestrictedTextField() {
}

@Override
public void setMaxLength(int maxLength) {
super.setMaxLength(maxLength);
applyMaxLength();
}

@Override
protected void afterRender() {
super.afterRender();
applyMaxLength();
}

private void applyMaxLength() {
if (rendered) {
getInputEl().setElementAttribute("maxlength", getMaxLength());
}
}
}

syamlal
16 Feb 2012, 12:45 AM
Hi Vesna,
I had the same problem and tried your fix. It works fine on mozilla but not in IE... any solution???

JonathanEF
7 Mar 2012, 9:46 AM
Better solution than using a listener is to take advantage of build in DOM functionality. I found this solution by looking through ext-all-debug.js (the version I have seems to lack a setMaxLength function).

so I would add the following function to your model

,setMaxLength: function(newMaxLength) {
this.maxLength = Ext.Number.from(parseInt(newMaxLength), this.initialConfig.maxLength);
if(this.enforceMaxLength) {
this.inputEl.dom.maxLength = this.maxLength;
}
}I've confirmed that this solution works in Chrome, FireFox, and IE (7,8,9).

You could easily make a function for number type fields that did something like number.setMaxValueLength(newMaxValue); Then you just do String(newMaxValue).length for the new maxLength.