フォームを送信すると、間違った値の入力ボックスは色が変わるはずです

<html> 
<head> 
</head> 
<body> 
<script type="text/javascript" language="javascript"> 




function isUpperCase(str) { 
return str === str.toUpperCase(); 
} 

function validate() 
{ 
    var flag=0; 
    var x=document.getElementById("f").value; 
    var y=document.getElementById("l").value; 
    var w=document.getElementById("c").value; 
    var p=document.getElementById("o").value; 
    //the first name should be all capital and less than 20 characters 
    if(x.length>20 || x=="" || isUpperCase(x)==false) 
    { 
     flag=1; 
document.getElementById("f").style.backgroundColor = "yellow"; 
    } 
    //the last name should be less than 15 characters and all capital 
    if(y.length>15 || y=="" || isUpperCase(y)==false) 
    { 
     flag=1; 
document.getElementById("l").style.backgroundColor = "yellow";   
    } 
    //the customer number length should be 5 
    if(w=="" || w.length!=5) 
    { 
     flag=1; 
    document.getElementById("c").style.backgroundColor = "yellow";   
    } 
    //order num length should be 5,first character should be 'p' and next three should be numbers. 
    if(p.length!=5 || p.charAt(0)!='p' || isNaN(p.substr(1,3))) 
    { 
     flag=1; 
    document.getElementById("o").style.backgroundColor = "yellow";  
    } 
    if(flag==1) 
     alert("check the colored boxes"); 
    return flag; 

} 

</script> 
<form name="myform" onsubmit=" return validate()" action="" method="post"> 
    first name:<input id="f" type="text" name="first"><br> 
    last name:<input id="l" type="text" name="last"><br> 
    customer no:<input id="c" type="text" name="customer_num"><br> 
    order no:<input id="o" type="text" name="order_num"><br> 
    date:<input id="d" type="date" name="date"><br> 
    <input type="submit" value="submit"> 
</form> 

</body> 
</html>

私はjavascriptを初めて使用しています。関数validateはフォーム入力の制約をチェックし、条件が満たされない場合は入力の背景色が変更され、最後にカラーボックスのチェックを求める警告が表示されます。フォームを送信すると、間違った値の入力ボックスは色が変わるはずです

出典

2016-11-21 Ali

のようになりますか？ – Rayon

フォームがvalidated.itを取得していないのは、 – Ali

あなたのフラグが '0' /' 1'であるときにリフレッシュされます。なぜ 'boolean'を使用しないのですか？ – pwolaq

最初の2つのif文で、代入演算子=を使用しているのは、比較演算子==ではないと思います。 y if文で

if(x.length>20 || x=="" || isUpperCase(x)==false)

と同じに

if(x.length>20 || x="" || isUpperCase(x)==false)

を変更してみてください。

出典

2016-11-21 11:55:59 GeoffWilson

はい、警告がポップアップして色付きのボックスをチェックしても、色は変わりません。ちょっとだけ色が変わってから更新されます – Ali

この関数はフラグを返してページを更新しますあなたの関数の最後に "return flag"を削除しようとしました – farhadamjady

問題は、あなたがこんにちはfalse

出典

2016-11-21 12:09:39 pwolaq

ありがとうございました。問題でした。検証されなかったとしてもフォームは送信し続けました.1と0の代わりにブール値を使用しました。 – Ali

を返す必要が送信フォームを防止したい場合にはファンクションポイントするためにあなたの行動を変更してくださいあなたは1または0

のいずれかに戻ってきているということです。また、あなたはあなたのコード

if(y.length>15 || y=="" || isUpperCase(y)==false)

に1 '=' を忘れてしまいました。問題を修正します。

<form name="myform" action="javascript:validate();"> 
 
    first name:<input id="f" type="text" name="first"><br> 
 
    last name:<input id="l" type="text" name="last"><br> 
 
    customer no:<input id="c" type="text" name="customer_num"><br> 
 
    order no:<input id="o" type="text" name="order_num"><br> 
 
    date:<input id="d" type="date" name="date"><br> 
 
    <input type="submit" value="submit"> 
 
</form>

最終的なコードが動作していない何

function isUpperCase(str) { 
 
return str === str.toUpperCase(); 
 
} 
 

 
function validate(e) 
 
{ 
 
    var flag=0; 
 
    var x=document.getElementById("f").value; 
 
    var y=document.getElementById("l").value; 
 
    var w=document.getElementById("c").value; 
 
    var p=document.getElementById("o").value; 
 
    //the first name should be all capital and less than 20 characters 
 
    if(x.length>20 || x=="" || isUpperCase(x)==false) 
 
    { 
 
     flag=1; 
 
document.getElementById("f").style.backgroundColor = "yellow"; 
 
    } 
 
    //the last name should be less than 15 characters and all capital 
 
    if(y.length>15 || y=="" || isUpperCase(y)==false) 
 
    { 
 
     flag=1; 
 
document.getElementById("l").style.backgroundColor = "yellow";   
 
    } 
 
    //the customer number length should be 5 
 
    if(w=="" || w.length!=5) 
 
    { 
 
     flag=1; 
 
    document.getElementById("c").style.backgroundColor = "yellow";   
 
    } 
 
    //order num length should be 5,first character should be 'p' and next three should be numbers. 
 
    if(p.length!=5 || p.charAt(0)!='p' || isNaN(p.substr(1,3))) 
 
    { 
 
     flag=1; 
 
    document.getElementById("o").style.backgroundColor = "yellow";  
 
    } 
 
    if(flag==1) 
 
     alert("check the colored boxes"); 
 
    return flag; 
 

 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
<form name="myform" action="javascript:validate();"> 
 
    first name:<input id="f" type="text" name="first"><br> 
 
    last name:<input id="l" type="text" name="last"><br> 
 
    customer no:<input id="c" type="text" name="customer_num"><br> 
 
    order no:<input id="o" type="text" name="order_num"><br> 
 
    date:<input id="d" type="date" name="date"><br> 
 
    <input type="submit" value="submit"> 
 
</form> 
 
</body> 
 
</html>

出典

2016-11-21 12:26:45

フォームを送信すると、間違った値の入力ボックスは色が変わるはずです

答えて

関連する問題