単純なWebフォームを検証する方法

Question

小さなフォームで作業し、jsを使用してフィールドが空であるかどうかを検証します。私は名前フィールドの隣にスパンクラスを持っています"名前""メール"。

「名前」フィールドの場合、「エラー」というスパンクラスがあります。

"email"フィールドには、 "error2"という別のスパンクラスがあります。

「エラーメッセージ」を表示するために1つのクラスのみを使用することはできますか？もちろん、私はもっとフィールドを持ちますので、さらにクラスを追加したくありません。 error3、error4

HTML：

<form action="#i" name="myForm" onsubmit="return(validate());"> 
    Name: <span id="error"></span><br> 
    <input type="text" name="Name" /><br><br> 

    EMail: <span id="error2"></span><br> 
    <input type="text" name="EMail" /><br> <br> 

    <input type="submit" value="Submit" /> <br> 
    </form> 

JS：

function validate() 
    { 
    var t = 0;  
    if(document.myForm.Name.value == "") 
    { 
     document.getElementById('error').innerHTML = "<br>Empty"; 
     t = 1; 
    } 

    if(document.myForm.EMail.value == "") 
    { 
     document.getElementById('error2').innerHTML = "<br>Empty"; 
     t = 1; 
    } 

    if(t == 1) 
    { 
     return false; 
    } 
    else 
     return true; 
    } 

Answer 1

代わりのスパンにIdの属性を与え、使用クラスの代わりに。たとえば、すべてのあなたのスパンを定義することができるように、次のように：

<span class="error"> ... </span> 

次に、あなたの検証機能では、あなたがこれらのスパンを通じて入手することができます

document.getElementsByClassName('error'); 

しかし覚えておいて、これは配列を返します実際にはあなたの機能にとって完璧です。こうすることで、基本的なforループを作成して各スパンを調べ、各フィールドが正しく入力されていることを確認することができます。