Results 1 to 4 of 4

Thread: Force focus on invalid field after form validation

  1. #1
    Sencha User Remy's Avatar
    Join Date
    Apr 2008
    Posts
    306

    Default Force focus on invalid field after form validation

    The subject just about sums up my question, I have various forms being created dynamically, I also have attached events to each field to allow submission based on the enter key. If a user tries to submit by pressing enter (or the submit button) and the form validation fails, I would like the focus to be placed on the first field which fails validation? This must have been done before. I can see how I could loop through the fields and check isValid() for each and set focus on the first encountered element, but wondered if there was an easier or more elegant solution?

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    I don't think there is. You'll have to find the first one and call focus() on it. A quick

    Code:
    var firstInvalid = myFormPanel.getForm().items.find(function(f){return !f.isvalid();});
    if (firstInvalid) {
        firstInvalid.focus();
    }
    should do it.

  3. #3
    Sencha User Remy's Avatar
    Join Date
    Apr 2008
    Posts
    306

    Default

    Cheers Animal, thought there might be some shortcut I had missed in my search.

  4. #4
    Sencha User Remy's Avatar
    Join Date
    Apr 2008
    Posts
    306

    Default

    Don't know if you'll see this Animal but should this also work for basicForm? I know the basicForm has an items mixed collection (although I can't see it in the API docs), this has a find function but I get an f.isvalid() is not a valid function, stepping through the code in FF and I can't seem to find the problem.

    Code:
    find : function(fn, scope){
    	for(var i = 0, len = this.items.length; i < len; i++){
    		if(fn.call(scope || window, this.items[i], this.keys[i])){
    			return this.items[i];
    		}
    	}
    	return null;
    },
    Edit:

    Just had a look before posting this, I'm sure I have been using the code above successfully but the isvalid() function should be isValid(). Works fine now.

Posting Permissions

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