Auto Focus if validation fails

Hi,
Is it possible to ensure the focus or mouse is on the field that fails validation upon submission in addition to the error tip that is provided? This will make it easier for visitors to know exactly where the error is. Better still, I have seen some forms that will actually change the color of the specific textfields to indicate that the user has to correctly complete that.

Thanks for any code ideas

Hi omojesu,

the field will be focused actually!

Max

Hi omojesu,

If you look here you'll also find a recent post on textareas which may give you ideas for changing field colours.

Bob

I am also having this problem. My form at https://www.bakeru.edu/spgs-prospective-students/working-adults-request-info is not focusing on the required element if it is off screen when I hit submit.

This makes it very hard for users to understand why the form won't submit.

Any Ideas?

Hi,

the current validation script used doesn't support auto focus, I will add this feature soon!

Cheers
Max

Good to hear it's in the works. for now I've got a 'hack' that seems to work pretty good.

Replace the massvalidate function in /components/com_chronocontact/js/validationlive_standalone.js with the code below

LiveValidation.massValidate = function(validations){
var returnValue = true;
el = false;

for(var i = 0, len = validations.length; i < len; ++i ){
var valid = validations[i].validate();
if(!valid && !el) el = validations[i].element;
if(returnValue) returnValue = valid;
}
if(!returnValue){
el.scrollIntoView(true);
}
return returnValue;
}

This finds the first validation error and uses scrollIntoView to let the user know their was a problem.

Hope this helps

Hi, thanks for sharing this, but it didn't work for me, the attached code works but its not very smooth, it needs some improvements and more testing!

LiveValidation.massValidate = function(validations){
  var returnValue = true;
	for(var i = 0, len = validations.length; i < len; ++i ){
		var valid = validations[i].validate();
		if(returnValue) returnValue = valid;
		if(!valid)validations[i].element.focus();
	}
	return returnValue;
}

Regards,
Max

hi,

the script seems to work.

Is there a way to mark the errorbox when it get the focus and show the errormessage (title="xxxxx")

by modding this funktion, the message will not removed on foczus. Maybe the is a better way to improve this....

When more validation errors are in the form, the focus is in the last field. Is is possible to put the focus in the first field?

show the message at focus:

 /**
     *	removes the message and the field class
     */
   /* removeMessageAndFieldClass: function(){
      this.removeMessage();
      this.removeFieldClass();
    }*/