Forums

Validation does not move to error field

johnlanglois 17 Jan, 2011
The validation code is trapping errors correctly.
However, because it does not move to the offending field and the form is rather long, the user has to either scroll around to find the error or assumes the form is broken.

How can I get the validation code to move to the error field.

Joomla 1.5.15 and ChronoContact V3.2

Thanks.
GreyHead 17 Jan, 2011
Hi johnlanglois,

There have been a couple of threads talking about ways of moving the error message (either to the top or bottom of the page). I don't think that we've looked at moving the focus but it should be fairly straightforward with a little JavaScript to check for inputs with the invalid class.

Bob
johnlanglois 17 Jan, 2011
Thank you. I have searched the site, but the best answer I could find was a javascript Alert that required two clicks to fire. Not a good solution.

Am I correct in interpreting that jsvalidation2.js flags all invalid fields and just returns true?
Could I change it to return the name of the first invalid field and fire a setFocus event on that?

It seems to me that should have been part of the code already.

How would I do the class test that you suggested?
GreyHead 17 Jan, 2011
Hi johnlanglois,

The validation code used is the LiveValidation library and the jsvalidation2.js file (and the other similar ChronoForms files) are used to tie the validation to the form.

For a long form you presumably are validating before submission so the user should usually see the message while they are close to the offending input.

The error code adds the LV_invalid_field class to the inputs so you could use a script to create an array of inputs with the error class and go to the next one.

Bob
jeffcloutier 27 May, 2011
Hi at line 337 of livevalidation_standalone.js add

this.element.focus();

validate: function(){
      if(!this.element.disabled){
		var isValid = this.doValidations();
		if(isValid){
			this.onValid();
			return true;
		}else {
			this.onInvalid();
			this.element.focus();
			return false;
		}
	  }else{
      return true;
    }
    },


Still not a perfect solution... client need to fill right now the invalid field...
This topic is locked and no more replies can be posted.