validacion con javascript

[helenp]

Hola, tengo un script de validación ajax, con mootools,
funciona muy bien, pero tengo un formulario muy largo, y cuando no se rellena un campo obligatorio sale un texto en rojo al lado diciendo que lo rellene.
Pero como el formulario es muy largo entonces al darle clic a enviar en el boton, pues si esta arriba no se ve la advertencia y parece solo que no funciona enviar el formulario.
Quizas con javascript normal hay alguna forma de añadir que salte al que falta por rellenar?

se llama al javascript mediante clases que son class="required" y class="required email" y tienen un title que es el texto que aparece al lado de la casilla

con este script al final se ejecuta:
<script type="text/javascript">

window.addEvent('domready', function(){
var myFormValidation = new Validate('myForm',{
errorClass: 'red'
});
});
</script>

Teneis alguna idea, podría poner los datos necesarios abajo del todo, pero de verdad no queda muy bien.
Gracias

[helenp]

Esta es la parte editable del script

Código Javascript:

var Validate = new Class({  
    getOptions: function(){
        return {
            validateOnBlur: true,
            errorClass: 'error',
            errorMsgClass: 'errorMessage',
            dateFormat: 'dd/MM/yy',
            onFail: Class.empty,
            onSuccess: false,
            showErrorsInline: true,
            label: 'Please wait...'};},
    initialize: function(form, options){
        this.setOptions(this.getOptions(), options);        
        this.form = $(form);
        this.elements = this.form.getElements('.required'); 
        this.list = [];     
        this.elements.each(function(el,i){
            if(this.options.validateOnBlur){
                el.addEvent('blur', this.validate.bind(this, el));          }
        }.bind(this));      
        this.form.addEvent('submit', function(e){
            var event = new Event(e);
            var doSubmit = true;
            this.elements.each(function(el,i){
                if(! this.validate(el)){
                    event.stop();
                    doSubmit = false
                    this.list.include(el);
                }else{
                    this.list.remove(el);               }
            }.bind(this));          
            if(doSubmit){
                if(this.options.onSuccess){
                    event.stop();
                    this.options.onSuccess(this.form);
                }else{
                    this.form.getElement('input[type=submit]').setProperty('value',this.options.label);             }
            }else{
                this.options.onFail(this.getList());            }           
        }.bind(this));          },  
    getList: function(){
        var list = new Element('ul');
        this.list.each(function(el,i){
            if(el.title != ''){
            var li = new Element('li').injectInside(list);
            new Element('label').setProperty('for', el.id).setText(el.title).injectInside(li);          }
        });
        return list;    },  
    validate: function(el){
        var valid = true;
        this.clearMsg(el);      
        switch(el.type){
            case 'text':
            case 'textarea':
            case 'select-one':
                if(el.value != ''){
                    if(el.hasClass('email')){
                        var regEmail = /^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/;
                        if(el.value.toUpperCase().match(regEmail)){
                            valid = true;
                        }else{
                            valid = false;
                            this.setMsg(el, 'Please enter a valid email address');                      }                   }                   
                    if(el.hasClass('number')){
                        var regNum = /[-+]?[0-9]*\.?[0-9]+/;
                        if(el.value.match(regNum)){
                            valid = true;
                        }else{
                            valid = false;
                            this.setMsg(el, 'Please enter a valid number');                     }                   }                   
                    if(el.hasClass('postcode')){
                        var regPC = /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z])))) [0-9][A-Za-z]{2})$/
                        if(el.value.match(regPC)){
                            valid = true;
                        }else{
                            valid = false;
                            this.setMsg(el, 'Please enter a valid postcode');                   }                   }                   
                    if(el.hasClass('date')){
                        var d = Date.parseExact(el.value, this.options.dateFormat);
                        if(d != null){
                            valid = true;
                        }else{
                            valid = false;
    this.setMsg(el, 'Please enter a valid date in the format: '+this.options.dateFormat.toLowerCase());         }               }               
                }else{
                    valid = false;
                    this.setMsg(el);}
                break;              
            case 'checkbox':
                if(!el.checked){
                    valid = false;
                    this.setMsg(el);
                }else{
                    valid = true;               }
                break;              
            case 'radio':
                var rad = $A(this.form[el.name]);
                var ok = false;
                rad.each(function(e,i){
                    if(e.checked){
                        ok = true;              }           });
                if(!ok){
                    valid = false;
                    this.setMsg(rad.getLast(), 'Please select an option');
                }else{
                    valid = true;
                    this.clearMsg(rad.getLast());               }
                break;                      }
        return valid;   },  
    setMsg: function(el, msg){
        if(msg == undefined){
            msg = el.title;     }
        if(this.options.showErrorsInline){
            if(el.error == undefined){
                el.error = new Element('span').addClass(this.options.errorMsgClass).setText(msg).injectAfter(el);
            }else{
                el.error.setText(msg);          }
            el.addClass(this.options.errorClass);   }   },  
    clearMsg: function(el){
        el.removeClass(this.options.errorClass);
        if(el.error != undefined){
            el.error.remove();
            el.error = undefined;       }   }});
Validate.implement(new Options);
Validate.implement(new Events);
 

[Alexis88]

Prueba dándole el enfoque al elemento cuando se lance el mensaje de error:

Código Javascript:

this.focus();
 

Saludos

[helenp]

Iniciado por Alexis88

Prueba dándole el enfoque al elemento cuando se lance el mensaje de error:

Código Javascript:

this.focus();
 

Saludos

gracias,
una pistita mas por favor, que solo sé editar javascript.
Me imagino que debo de hacer una función aqui.
initialize: function(form, options){
this.setOptions(this.getOptions(), options);
this.form = $(form);
this.elements = this.form.getElements('.required');
this.list = [];
this.elements.each(function(el,i){
if(this.options.validateOnBlur){
el.addEvent('blur', this.validate.bind(this, el)); }
}.bind(this));

existe salto en javascript?
gracias

[Alexis88]

¿A qué te refieres con "salto"?

[PHPeros]

¿Salto de línea?

"\n"

[Alexis88]

¿O este?

Código HTML:

<br />
 

¿O quizá este?

[helenp]

puf, lo siento, me refería a saltar al error.
He estado probando y aún no he conseguido nada.
supongo que vendrá alqo como si da a submit y da falso que da focus al input que esta mal, pero no doy ni una.

[helenp]

Iniciado por Alexis88

¿O este?

Código HTML:

<br />
 

¿O quizá este?

No hay que reirse del inculto :(

[Alexis88]

Cuando te decía que le des el enfoque al elemento que no aprueba la validación, me refería a que hagas un this.focus() en donde corresponda, por ejemplo, veo esto en el código que mostraste inicialmente:

Código Javascript:

if(el.value.toUpperCase().match(regEmail)){
    valid = true;
}else{
    valid = false;
    this.setMsg(el, 'Please enter a valid email address');                      
}
 

Después del mensaje de advertencia, podría ir el this.focus().

Iniciado por helenp

No hay que reírse del inculto :(

Disculpa si te ofendí, quería agregarle una cuota de humor a la publicación.

Saludos

[helenp]

Gracias, he probado con el focus en absolutamente todos los sitios y no cambia nada
A jugar!:
y resulta que se quedaba en cache.

Y ahora me doy cuenta que alli no tiene que ser la validación, porque alli es donde se valida si no lo inserta correctamente.
Debe de ser donde verifica que el campo no está vacio
creo que es aqui:

Código Javascript:

getList: function(){
        var list = new Element('ul');
        this.list.each(function(el,i){
            if(el.title != ''){
            var li = new Element('li').injectInside(list);
            new Element('label').setProperty('for', el.id).setText(el.title).injectInside(li);          }
        });
        return list;    },
 

en esto esta el mensaje de error, el mensaje es el.title

Código Javascript:

new Element('label').setProperty('for', el.id).setText(el.title).injectInside(li);
 

[helenp]

He probado asi:

Código Javascript:

var list = new Element('ul');
        this.list.each(function(el,i){
            if(el.title != ''){
            var li = new Element('li').injectInside(list);
            new Element('label').setProperty('for', el.id).setText(el.title).injectInside(li).this.focus;           }
        });
 

y nada
asi tampoco

Código Javascript:

new Element('label').setProperty('for', el.id).setText(el.title).injectInside(li).focus;