Javascriptフォームの検証

私は単純なフォームの検証をしようとしていますが、それは私が望むように動作しません。フィールドの境界線が有効/無効である場合、フィールドの境界線が緑色/赤色に変わる必要があります。 Eメールの部分だけがそれを行う方法で動作しています。
Javascriptフォームの検証

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<head> 
</head> 
<body> 
<script> 

function emailcheck(){ 
    var string1=document.example.email.value 
    if (string1.indexOf("@")==-1){ 
     document.getElementById ("result").innerHTML = "Email nicht korrekt"; 
     document.getElementById ("result").style.color = "#ff0000"; 
     document.getElementById ("emailinput").style.borderColor = "red"; 
    } 
    else{ 
     document.getElementById ("result").innerHTML = "Email korrekt"; 
     document.getElementById ("result").style.color = "#11aa55"; 
     document.getElementById ("emailinput").style.borderColor = "green"; 
     } 
} 
function namecheck(){ 
    var string2=document.example.name.value 
    if /*(something that defines letters?)*/{ 
     document.getElementById ("result2").innerHTML = "Name nicht korrekt"; 
     document.getElementById ("result2").style.color = "#ff0000"; 
     document.getElementById ("nameinput").style.borderColor = "red"; 
    } 
    else{ 
     document.getElementById ("result2").innerHTML = "Name korrekt"; 
     document.getElementById ("result2").style.color = "#11aa55"; 
     document.getElementById ("nameinput").style.borderColor = "green"; 
     } 
} 
function telcheck(){ 
    var string3=document.example.tel.value 
    if /*(something that defines numbers?)*/{ 
     document.getElementById ("result3").innerHTML = "Tel nicht korrekt"; 
     document.getElementById ("result3").style.color = "#ff0000"; 
     document.getElementById ("telinput").style.borderColor = "red"; 
    } 
    else{ 
     document.getElementById ("result3").innerHTML = "Tel korrekt"; 
     document.getElementById ("result3").style.color = "#11aa55"; 
     document.getElementById ("telinput").style.borderColor = "green"; 
     } 
} 
</script> 
<center> 
<form name="example"><input id="emailinput" type="text" style="border:1px solid" size="20" name="email" placeholder="Your Email" onblur="emailcheck()"> 
<p id="result"></p> 
<input id="nameinput" type="text" style="border:1px solid" size="20" name="name" placeholder="Your Name" onblur="namecheck()"> 
<p id="result2"></p> 
<input id="telinput" type="text" style="border:1px solid" size="20" name="tel" placeholder="Please like 123456" onblur="telcheck()"> 
<p id="result3"></p> 
<input type="submit" value="Submit"> 
</form> 
</center> 
</body> 
</html>

出典

2016-11-17 Lani

マークアップを追加することができます – Geeky

'nameinput'は' example'ではなく 'example2'という名前のフォームの中にあります。 – Hamms

あなたのようにインラインスタイルではなくCSSスタイルシートを使用することを検討することができます。 CSSには '：invalid'疑似クラスを介して無効なフィールドを指定する機能もあります。 –

に変更します。

セカンド詳細については、この

var regex2 = /^\d+$/; //only numbers 
if(!regex2.test(string3)){ ... }

のようなこの

var regex1 = /^[a-zA-Z]*$/; //only letters 
var length = string2.length; //if this equals to 0 then user didn't type anything 
if(!regex1.test(string2) || length < 1){ ... }

そして第三のようなものでなければならない場合hereをご確認ください。

出典

2016-11-17 23:03:00

それはあなたの中2つのエラー得たように見えます：テスト目的のために

if/*(something that defines numbers?)*/{..

を、あなたは正規表現を使用する必要が

if (true)/*(something that defines numbers?)*/{..

出典

2016-11-17 23:02:43 RizkiDPrast

Javascriptフォームの検証

答えて

関連する問題