¿Validar la función de formulario salta al error?

Tengo un formulario con un script de validación que funciona perfectamente. Sin embargo, me gustaría que el formulario salte a los campos que no validan o muestran el nombre de los campos en el mensaje de error.

El código que uso para validar es:

else
{
    var valid = document.formvalidator.isValid(f);
}

if (flag == 0 || valid == true) {
    f.check.value = '<?php echo JUtility::getToken(); ?>';//send token
}
else {
    alert('There was an error with the fields..');
    return false;
}
return true;

¿Cómo puedo obtener la alerta para nombrar los campos que deben completarse correctamente o saltar al campo específico?

Editado ----------

Hola,

Gracias por la ayuda hasta ahora. Soy muy nuevo en JS. El formulario está en un componente de Joomla.

La función completa que valida el formulario es

function validateForm(f){
    var browser = navigator.appName;
    if (browser == "Microsoft Internet Explorer"){
            var flag = 0;
            for (var i=0;i < f.elements.length; i++) {
                el = f.elements[i];
                 if ($(el).hasClass('required')) {
                     var idz= $(el).getProperty('id');
                        if(document.getElementById(idz)){
                            if (!document.getElementById(idz).value) {
                                document.formvalidator.handleResponse(false, el);
                                flag = flag + 1;
                            }
                       }
                 }
            }
    }
    else {
        var valid = document.formvalidator.isValid(f);
    }

    if(flag == 0 || valid == true){
        f.check.value='<?php echo JUtility::getToken(); ?>';//send token
    }
    else {
        alert('<?php echo JText::_('JBJOBS_FIEDS_HIGHLIGHTED_RED_COMPULSORY'); ?>');
        return false;
    }
    return true;
}

Archivo js externo:

  var JFormValidator = new Class(
    {
        initialize : function() {
            this.handlers = Object();
            this.custom = Object();
            this.setHandler("username", function(b) {
                regex = new RegExp("[<|>|\"|'|%|;|(|)|&]", "i");
                return !regex.test(b)
            });
            this.setHandler("password", function(b) {
                regex = /^\S[\S ]{2,98}\S$/;
                return regex.test(b)
            });
            this.setHandler('passverify',
                    function (value) {
                    return ($('password').value == value);
            }
            ); // added March 2011
            this.setHandler("numeric", function(b) {
                regex = /^(\d|-)?(\d|,)*\.?\d*$/;
                return regex.test(b)
            });
            this
                    .setHandler(
                            "email",
                            function(b) {
                                regex = /^[a-zA-Z0-9._-]+(\+[a-zA-Z0-9._-]+)*@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
                                return regex.test(b)
                            });
            var a = $$("form.form-validate");
            a.each(function(b) {
                this.attachToForm(b)
            }, this)
        },
        setHandler : function(b, c, a) {
            a = (a == "") ? true : a;
            this.handlers[b] = {
                enabled : a,
                exec : c
            }
        },
        attachToForm : function(a) {
            a.getElements("input,textarea,select")
                    .each(
                            function(b) {
                                if (($(b).get("tag") == "input" || $(b)
                                        .get("tag") == "button")
                                        && $(b).get("type") == "submit") {
                                    if (b.hasClass("validate")) {
                                        b.onclick = function() {
                                            return document.formvalidator
                                                    .isValid(this.form)
                                        }
                                    }
                                } else {
                                    b.addEvent("blur", function() {
                                        return document.formvalidator
                                                .validate(this)
                                    })
                                }
                            })
        },
        validate : function(c) {
            c = $(c);
            if (c.get("disabled")) {
                this.handleResponse(true, c);
                return true
            }
            if (c.hasClass("required")) {
                if (c.get("tag") == "fieldset"
                        && (c.hasClass("radio") || c.hasClass("checkboxes"))) {
                    for ( var a = 0;; a++) {
                        if (document.id(c.get("id") + a)) {
                            if (document.id(c.get("id") + a).checked) {
                                break
                            }
                        } else {
                            this.handleResponse(false, c);
                            return false
                        }
                    }
                } else {
                    if (!(c.get("value"))) {
                        this.handleResponse(false, c);
                        return false
                    }
                }
            }
            var b = (c.className && c.className
                    .search(/validate-([a-zA-Z0-9\_\-]+)/) != -1) ? c.className
                    .match(/validate-([a-zA-Z0-9\_\-]+)/)[1]
                    : "";
            if (b == "") {
                this.handleResponse(true, c);
                return true
            }
            if ((b) && (b != "none") && (this.handlers[b])
                    && c.get("value")) {
                if (this.handlers[b].exec(c.get("value")) != true) {
                    this.handleResponse(false, c);
                    return false
                }
            }
            this.handleResponse(true, c);
            return true
        },
        isValid : function(c) {
            var b = true;
            var d = c.getElements("fieldset").concat($A(c.elements));
            for ( var a = 0; a < d.length; a++) {
                if (this.validate(d[a]) == false) {
                    b = false
                }
            }
            new Hash(this.custom).each(function(e) {
                if (e.exec() != true) {
                    b = false
                }
            });
            return b
        },
        handleResponse : function(b, a) {
            if (!(a.labelref)) {
                var c = $$("label");
                c.each(function(d) {
                    if (d.get("for") == a.get("id")) {
                        a.labelref = d
                    }
                })
            }
            if (b == false) {
                a.addClass("invalid");
                a.set("aria-invalid", "true");
                if (a.labelref) {
                    document.id(a.labelref).addClass("invalid");
                    document.id(a.labelref).set("aria-invalid", "true");
                }
            } else {
                a.removeClass("invalid");
                a.set("aria-invalid", "false");
                if (a.labelref) {
                    document.id(a.labelref).removeClass("invalid");
                    document.id(a.labelref).set("aria-invalid", "false");
                }
            }
        }
    });
document.formvalidator = null;
window.addEvent("domready", function() {
document.formvalidator = new JFormValidator() 
});

¿Dónde editaría el código como algunos de ustedes han respondido a continuación?

preguntado el 12 de junio de 12 a las 15:06

Bueno, ¿cómo funciona el código de validación? Debe recorrer los campos del formulario para validar cada uno de ellos. -

Esto es probablemente lo que hace JUtility. Parece una integración simple de un script/biblioteca existente. -

3 Respuestas

con jQuery biblioteca js, desplácese hasta el elemento (selector de id o clase)

<p class="error">There was a problem with this element.</p>

Esto se pasa al complemento ScrollTo de la siguiente manera.

$.scrollTo($('p.error:1'));

ver fuente

Respondido el 12 de junio de 12 a las 15:06

Usando .each de jQuery, recorra los campos. En cada iteración, el elemento que se está investigando estará bajo el this variable.

Por lo tanto, this.id da la identificación del elemento que estás buscando. Guárdelos para recopilar todos los campos incorrectos, luego resáltelos o imprima sus nombres en un mensaje.

Tenga en cuenta que esta es la idea básica, no puedo dar una respuesta real hasta que muestre el código que maneja el formulario.

Saludos cordiales,

D.

Respondido el 12 de junio de 12 a las 15:06

Puede hacer que su rutina isValid devuelva el mensaje de error en lugar de devolver un valor booleano.

En isValid, puede crear el mensaje de error para incluir los nombres de campo con errores.

En lugar de verificar "válido == verdadero", verificará "errorMessage.length == 0".

Si desea centrarse en un campo de error (solo puede centrarse en uno), hágalo también en la rutina isValid.

function isValid(f) {
   var errorMessage = ""; 
   var errorFields = "";
   var isFocused = false;
   ...
   if (field has an error) {
       errorFields += " " + field.name;
       if (!isFocused) {
           field.focus();
           isFocused = true;
       }
   }
   ...
   if (errorFields.length > 0) {
      errorMessage = "Errors in fields: " + errorFields;
   }

   return (errorMessage);
}

luego, en su rutina de llamadas:

var errorMessage = isValid(f);
if (flag == 0 || errorMessage.length == 0) {
    f.check.value='<?php echo JUtility::getToken(); ?>';//send token
}
else {
    alert(errorMessage);
    return false;
}
return true;

Respondido el 12 de junio de 12 a las 15:06

Hola, mira mi edición anterior. ¿Dónde editaría el código con tu sugerencia? - Crispinio

Esta es una pregunta sustancialmente diferente ahora, y la respuesta excede mi conocimiento y limitaciones de tiempo. - jeremy goodell

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.