2017-05-07 24 views
0

IMが簡単なフォームで作業していて、フィールドを検証しようとしています 以下のコードでフィールドを検証し、フィールドが空の場合はメッセージを追加できました。 }フォームを検証する

+0

[HTMLのid属性の有効な値は何ですか?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute -in-html) – Pedro

答えて

1

すると、次のようにあなたのjavascriptのコードを変更します。

function validation(id) { 
 
    var value = document.getElementById(id).value; 
 
    if (value === "" || value == null) { 
 
    document.getElementById('Err' + id).innerHTML = "- Field Required"; 
 
    document.getElementById(id).classList.add('class'); 
 
    var label = findLabel(document.getElementById('Name')); 
 
    label.classList.add('class'); 
 
    } else { 
 
    document.getElementById('Err' + id).innerHTML = ""; 
 
    document.getElementById(id).classList.remove('class'); 
 
    var label = findLabel(document.getElementById('Name')); 
 
    label.classList.remove('class'); 
 
    } 
 
} 
 

 
function findLabel(el) { 
 
    var idVal = el.id; 
 
    labels = document.getElementsByTagName('label'); 
 
    for (var i = 0; i < labels.length; i++) { 
 
    if (labels[i].htmlFor == idVal) 
 
     return labels[i]; 
 
    } 
 
}
.class 
 
{ 
 
    background: #f97d7d; 
 
    color: #ff0000; 
 
    border: 1px solid #ff0000 !important; 
 
}
<label class="" for="Name">* Name <span class="error" id="ErrName"></span></label> 
 
<input type="text" name="Name" id="Name" onblur="validation('Name')">

は、私がその入力のラベルを取得する機能findLableを追加した、とすることを利用しましたが、それにエラーのクラスを追加しましたラベル。

+0

'findLable'を定義しましたが、' findLableForControl'と呼ばれています。定義された/呼び出されたメソッドの名前を修正してください。 –

+0

申し訳ありませんが、上記の両方のエラーを修正しました。それらを指摘してくれてありがとう:) – gaganshera

0

スパンはクラス "エラー"として定義されていますが、そのクラスは定義されていません。

1

まずあなたがラベルのページをスキャンする必要があります。

var labels = document.getElementsByTagName('LABEL'); 
    for (var i = 0; i < labels.length; i++) { 
    if (labels[i].htmlFor != '') { 
     var elem = document.getElementById(labels[i].htmlFor); 
     if (elem) 
     elem.label = labels[i]; 
    } 
    } 

その後、あなたは、単に、あなたのIF-ELSE条件に

document.getElementById(id).label.classList.add('red-text'); 

document.getElementById(id).label.classList.remove('red-text'); 

を以下のように使用することができます私はまた、テキストが赤色になるようにCSSクラスが追加されました。

.red-text { 
    color: #ff0000; 
} 

決勝コード:

function validation(id) { 
 
    var labels = document.getElementsByTagName('LABEL'); 
 
    for (var i = 0; i < labels.length; i++) { 
 
    if (labels[i].htmlFor != '') { 
 
     var elem = document.getElementById(labels[i].htmlFor); 
 
     if (elem) 
 
     elem.label = labels[i]; 
 
    } 
 
    } 
 
    var value = document.getElementById(id).value; 
 
    if (value === "" || value == null) { 
 
    document.getElementById('Err' + id).innerHTML = "- Field Required"; 
 
    document.getElementById(id).classList.add('class'); 
 
    document.getElementById(id).label.classList.add('red-text'); 
 
    } else { 
 
    document.getElementById('Err' + id).innerHTML = ""; 
 
    document.getElementById(id).classList.remove('class'); 
 
    document.getElementById(id).label.classList.remove('red-text'); 
 
    } 
 
}
.class { 
 
    background: #f97d7d; 
 
    color: #ff0000; 
 
    border: 1px solid #ff0000 !important; 
 
} 
 

 
.red-text { 
 
    color: #ff0000; 
 
}
<label for="Name">* Name <span class="error" id="ErrName"></span></label> 
 
<input type="text" name="Name" id="Name" onblur="validation('Name')">

0

私はぼやけて入力イベント

コードと結合した方がよいと思う:

Name.addEventListener('blur', function(){ 
    if (!Name.value){ 
    ErrName.innerHTML="Field Required"; 
    this.classList.add('class'); 
    ErrName.parentNode.style.color="red"; 
    } 
}); 

Name.addEventListener('input',function(){ 
    if (Name.value.length && ErrName.innerHTML=="Field Required"){ 
    ErrName.innerHTML=""; 
    this.classList.remove('class'); 
    ErrName.parentNode.style.color="black"; 
    } 
}); 
を10

a liddle fiddle