Results 1 to 4 of 4

Thread: Message Box validation of input

  1. #1
    Ext User
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default Message Box validation of input

    I don't know if there is a more official way to do this, but I made a system for validating the input in a MessageBox.

    In your config options of the show() function, you now have the ability to set a validator option. This is the function which is used to validate the input. You also have the option to set a vTimer option.
    There is no possibility of being able to accept an invalid input, because the OK and YES buttons and actions are disabled while an invalid string is present. There are also checks to make sure that validation has occurred so the user cannot quickly type and press Enter to bypass the validation.

    In this version, there is also the ability to add a comboBox instead of a textfield. Cool, right?
    However, the comboBox is not validated using the validator. Shouldn't be hard to modify it, but it is not needed in my system.

    vTimer
    This is simply the amount of time to wait after a keystroke before validating. If another key is pressed in that time, it will reset (so validation doesn't have to happen after every keystroke when typing quickly).


    validator
    Parameters:
    ( String s ) - The value which is currently in the textField/textArea.
    Returns any of the following:
    Boolean - True if it is validated, false if it is an invalid string
    String - An error message to display. If '' or null, it is considered to be valid.
    [String] - An array of error messages to display. If [] or null, it is considered to be valid.

    Example validator function:
    Code:
    isItValid: function(s) {
    	var eMsg = [];
    
    	if(s.length == 0) {
    		eMsg.push('Cannot be blank.');
    	}
    	var invalidChars = inspectString(s, 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_- ');
    
    	if(invalidChars !== '') {
    		eMsg.push('Invalid Characters: \'' + invalidChars + '\'');
    	}
    
    	if(contains(reservedWords, s)) {
    		eMsg.push('Reserved Word.');
    	}
    	
    	return eMsg;
    },
    
    // I know this isn't optimized. It's on my list :)
    inspectString: function(s,ref){
    	var invalidChars = '';
    	var num = s.length;
    	for (var i=0; i<num; i++) {
    		if (ref.indexOf(s.substring(i,i+1)) == -1) 
    			invalidChars += s.substring(i,i+1);
    	}
    	return invalidChars;
    },


    Examples
    Code:
    Ext.MessageBox.show({
    	title:'Rename',
    	msg: 'New name for \'' + n.text + '\'',
    	buttons: Ext.MessageBox.OKCANCEL,
    	prompt:true,
    	validator: validators.isItValid,
    	value: n.text,
    	fn: function(btn, text) {}
    });
    Code:
    Ext.MessageBox.show({
    	title:'Rename',
    	msg: 'New name for \'' + n.text + '\'',
    	buttons: Ext.MessageBox.OKCANCEL,
    	prompt:true,
    	validator: validators.isItValid,
    	vTimer: 600,
    	value: n.text,
    	fn: function(btn, text) {}
    });
    Code:
    var combo = new Ext.form.ComboBox({
    	store: new Ext.data.SimpleStore({fields: ['display', 'value']}),
    	displayField:'display',	typeAhead: true,
    	mode: 'local',			triggerAction: 'all',
    	emptyText:'Default',	selectOnFocus:true
    });
    
    Ext.MessageBox.show({
    	title:'Template',
    	msg: 'Name of template to use:',
    	buttons: Ext.MessageBox.OKCANCEL,
    	fn: handleTemplate,
    	combo: combo
    });
    
    // OR
    Ext.MessageBox.prompt('Template', 'Name of template to use:', handleTemplate, this, null, combo);


    Feedback
    Let me know what you think. I know this may be overkill, and there very well may be a way to tie into the validation that already exists in EXT. This is the way I decided to do it currently.
    Enjoy.

    Sorry about some of the screenshot editing.... privacy, ya know?
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2

    Join Date
    Aug 2007
    Location
    Romania
    Posts
    42

    Default

    Is this working in Ext 2.0?

  3. #3
    Ext User
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    No, I didn't write this specific one for 2.0
    I do have something similar, and it uses Ext's validation technique.

    I made the textfield into an Ext.form.TextField with optional validation.
    Also I allowed the use of one or two combo boxes, although the layout is a bit off.
    Attached Files Attached Files

  4. #4

    Default nice job..

    Thank you so much for this.. I've been looking for something like this....Great job

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •