-1

フォームをインラインで検証しようとしていますが、正しい構文を取得できないようです.現時点ではこれを持っていますが、まだ何もしません. 最初の関数 formhandler は、要素がぼやけている場合にスパン要素のテキストを変更し、フィールドがフォーカスされた時点でエラーテキストを取り除くことを目的としています。

<html>
<script type = "text/javascript">
document.getElementById("form").onfocus = function formHandler()    {
    for(var i = 0; i < document.getElementById("form").length; i+=1){
        if(document.getElementById("form").elements[i].type == 'text') {
            if(document.getElementById("form").elements[i].focus()) {
                var onode = document.getElementById("form").elements[i].nextSibling;
                onode.innerHTML = "";
                valid = true;
            }
            else if(document.getElementById("form").elements[i].blur()) {
                var onode = document.getElementById("form").elements[i].nextSibling;
                onode.innerHTML = "Please Fill in Field";
                valid = false;
            }
        }
    }
}
function validate() {
    var valid = false;
    for(var i = 0; i < document.getElementById("form").length; i+=1){
        if(document.getElementById("form").elements[i].type == 'text') {
            if(document.getElementById("form").elements[i].value == "") {
                var onode = document.getElementById("form").elements[i].nextSibling;
                onode.innerHTML = "Please Fill in Field";
                valid = true;
            }
            else{
                var onode = document.getElementById("form").elements[i].nextSibling;
                onode.innerHTML = "";
                valid = false;
            }
        }
    }
}

document.getElementById("form").onsubmit = validate;
</script>
<head>
    <title>Question 1 / Vraag 1 - Basic JavaScript Validaton / Basiese JavaScript validasie
    </title>
    <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form method="get" action="" id = "form">
    <table>
    <tr>
    <td> Firstname:</td>
    <td> <input type="text" name="firstname" id="firstname" /><span id="fnError">
    </span></td>
    </tr>
    <tr>
    <td> Surname:</td>
    <td> <input type="text" name="surname" id="surname" /><span id="snError">
    </span></td>
    </tr>
    <tr>
    <td> Age:</td>
    <td> <input type="text" name="age" id="age" /><span id="aError">
    </span></td>
    </tr>
    <tr>
    <td>  Email:</td>
    <td><input type="text" name="email" id="email" /><span id="eError">
    </span></td>
    </tr>
    <tr><td colspan="2"><input type="button" value="Validate" onclick = "validate()"/></td></tr>
    </table>
    </form>
</body>
</html>

私はjqueryを使わずにこれを達成しようとしているので、提案しないでください.

4

3 に答える 3

2

これらは私があなたのコードで見つけた問題です:

  • 行 1: フォームにはメソッドがありません.focus。それはどういう意味でしたか？

  • 行 2:.lengthに変更.elements:

    for (var i = 0; i < document.getElementById("form").elements.length; i++ ) {
    var node = document.getElementById("form").elements[i];
    ...

    フォーム内の要素は としてエイリアス化されましnodeた。

  • 4 行目:要素がフォーカスされていない場合、.focus/メソッドは true を返しません。.blur私たちは自分でそれをしなければならないでしょう:

    node.onfocus = function() { this.isInFocus = true; };
node.onblur  = function() { this.isBlurred = !this.isInFocus; };

    結果のコードは次のとおりです。

    if ( node.isInfocus ) { ... }

else if ( node.isBlurred ) { ... }

  • 9 行目: 上記を参照してください。

  • window.onloadDOM がロードされたときに DOM 要素を使用できるように、コードを でラップします。

これは修正したコードです。それがあなたのために働くかどうか私に知らせてください：

var nodes = document.getElementById('form').elements, node;

for ( var i = 0; i < nodes.length; i++ ) (function(i) {

    nodes[i].onfocus = function() { this.isInFocus = true; };
    nodes[i].onblur  = function() { this.isBlurred = !this.isInFocus; };

})(i);


for (var i = 0; i < nodes.length; i++) {
    node = nodes[i];
    if (node.type == 'text') {
        if (node.isInFocus) {
            var onode = node.nextSibling;
            onode.innerHTML = "";
            valid = true;
        } else if (node.isBlurred) {
            var onode = node.nextSibling;
            onode.innerHTML = "Please Fill in Field";
            valid = false;
        }
    }
}
于 2012-11-22T01:41:43.043 に答える
0

まだ存在しない dom 要素を参照しています。1 つの解決策は、すべての<script>タグを の前に移動して</body>、スクリプトの実行時に要素が存在するようにすることです。別の方法として、純粋な JavaScript を使用すると、次のようになります。

<script>
window.onload = function(){
   //All your code here
}
</script>

（validate必要に応じて、関数は外部にある可能性があります）

乾杯

于 2012-11-22T01:24:44.577 に答える
0

最初の大きな問題: 最初のスクリプト ロードでこれらすべてを実行しようとしています。その時点ではメイン DOM はまだロードされていないため、document.getElementById("form") は何も検出しません。関数定義は onload ハンドラで行います。

また、最初の関数で「有効」にバインドすることを期待しているものがわからない。最後に、有効かどうかを判断したら、結果に対して何かを行う必要があります。

于 2012-11-22T01:20:13.013 に答える