0

我有一个带有完美工作的验证脚本的表单。但是，我希望表单跳转到不验证或显示错误消息中的字段名称的字段。

我用来验证的代码是：

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;

如何获得警报以命名需要正确填写的字段或跳转到特定字段？

已编辑 ----------

你好，

感谢您到目前为止的帮助。我对 JS 很陌生。该表单位于 Joomla 的一个组件中。

验证表单的完整功能是

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;
}

外部js文件：

  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() 
});

正如你们中的一些人在下面回答的那样，我将在哪里编辑代码？

4

3 回答 3

0

使用jquery js 库，滚动到元素（id 选择器或类）

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

这通过以下方式传递给 ScrollTo 插件。

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

见源

于 2012-06-12T14:50:02.940 回答
0

您可以让您的 isValid 例程返回错误消息，而不是返回布尔值。

在 isValid 中，您可以构建错误消息以包含有错误的字段名称。

您将检查“errorMessage.length == 0”，而不是检查“valid == true”。

如果您想关注一个错误字段（您只能关注一个），那么也可以在 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);
}

然后，在您的调用例程中：

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;
于 2012-06-12T14:50:21.003 回答
0

使用 jQuery 的 .each 循环遍历字段。在每次迭代中，正在调查的项目都将位于this变量下。

因此，this.id给出您要查找的元素的 id。存储这些以收集所有不正确的字段，然后突出显示它们或在消息中打印它们的名称。

请记住，这是基本思想，在您展示处理表单的代码之前，我无法给出实际答案。

亲切的问候，

D.

于 2012-06-12T14:50:55.340 回答