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 では、エラー メッセージを作成して、エラーのあるフィールド名を含めることができます。

「valid == true」をチェックする代わりに、「errorMessage.length == 0」をチェックします。

エラー フィールドに注目したい場合 (1 つだけに注目できます)、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 に答える