2016-03-26 60 views
0

私は動作するようにJavaScriptを取得できません! PasswordフィールドとRe-Type Passwordフィールドが必要で、両方のフィールドに値があり、ユーザーが両方のフィールドに同じパスワードを入力したことを確認します(パスワード一致)。パスワードフィールドの有効性を8文字以上にする必要があります。赤い背景で未完成のフィールドを強調表示し、未完了の各フィールドの横にテキストメッセージ(赤色で表示)をエラーメッセージで強調表示します。javascriptの検証合計初心者の助けを借りて

私はこれをやって3日を過ごしました!任意のヘルプappreciated.`

function validate() { 
 
    var fn = 
 
    document.getElementById("FName"); 
 
    if (fn.value == "") { 
 

 
    { 
 
     document.getElementById("FName").style.borderColor = "red"; 
 
     return false; 
 

 
    } 
 
    return true; 
 
    } 
 

 
    function validate() { 
 
    var sn = 
 
     document.getElementById("SName"); 
 
    if (sn.value == "") { 
 
     document.getElementById("SName").style.borderColor = "red"; 
 
     return false; 
 

 
    } 
 
    return true; 
 
    } 
 

 
    function validate() { 
 
    var un = 
 
     document.getElementById("UName"); 
 
    if (un.value == "") { 
 
     document.getElementById("UName").style.borderColor = "red"; 
 
     return false; 
 

 
    } 
 
    return true; 
 
    } 
 

 
    function checkPass() { 
 
    var pass = document.getElementById('pass'); 
 
    var c_pass = document.getElementById(' c_pass') 
 
    var message = document.getElementById('confirmMessage'); 
 
    var goodColor = "#66cc66"; 
 
    var badColor = "#ff6666"; 
 

 
    if (pass.value == c_pass.value) { 
 

 
     c_pass.style.backgroundColor = goodColor; 
 
     message.style.color = goodColor; 
 
     message.innerHTML = "Passwords Match!" 
 
    } else { 
 

 
     c_pass.style.backgroundColor = badColor; 
 
     message.style.color = badColor; 
 
     message.innerHTML = "Passwords Do Not Match!" 
 

 
    } 
 
    return true; 
 
    } 
 
}
<body> 
 
    <form action="Linkpage.html" id="myForm" method="post" name="myForm" onsubmit="return(validate())"> 
 
    </form> 
 
    <br> 
 
    <table> 
 
    <tr> 
 
     <td align="center" colspan="2"><span style="font-size:50px; color:blue;">Registration form</span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td align="center" colspan="2">Welcome to our website 
 
     <br>please fill in <span style=" color:red;">all</span> 
 
     <b><ins>fields</ins></b> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>First Name</td> 
 
     <td> 
 
     <input autofocus="" id="FName" placeholder="Enter First name " type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Last Name</td> 
 
     <td> 
 
     <input id="SName" placeholder="Enter Last name " type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Username</td> 
 
     <td> 
 
     <input id="UName" placeholder="Enter username " type "text"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Age</td> 
 
     <td> 
 
     <input id="Age" placeholder="Enter age" type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Password</td> 
 
     <td> 
 
     <input id="pass" placeholder="Enter password " type="password"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Confirm Password</td> 
 
     <td> 
 
     <input name="confirm password" id="c_pass" placeholder="Re-type your   password " type="password" onkeyup="checkPass(); return false;"> 
 
     <span id="confirmMessage" class="confirmMessage"></span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="2">Gender</td> 
 
     <td> 
 
     <input name="mGender" type="radio" value="Male">Male</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input name="fGender" type="radio" value="Female">Female</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Available</td> 
 
     <td> 
 
     <input id="checkbox" type="checkbox"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Course</td> 
 
     <td> 
 
     <select> 
 
      <option value="Mobile App"> 
 
      Mobile App 
 
      </option> 
 
      <option value="Cloud"> 
 
      Cloud 
 
      </option> 
 
      <option value="Software Development"> 
 
      Software Development 
 
      </option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="Comments">Comments</td> 
 
     <td> 
 
     <br> 
 
     <textarea cols="30" name="Comments" placeholder="Type your comments here." rows="6"></textarea> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td align="center" colspan="4" align="center"> 
 
     <input name="submit" onclick="return validate()" type="submit" value="Register" align="center" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

+0

だから正確にどの部分が正しく動作していないのですか? – csmckelvey

+0

javascriptのどれも、パスワードやアラートと一致する背景色が表示されません! –

+0

Takendark私がしたことは、フォームを提出させないことです! –

答えて

-1

あなたのコードには多くのバグがあります。これは初心者としては普通のことですが、試してみるのは素晴らしいです。だから私がやったことは、あなたのjavascriptを見ています。私はあなたにスクリプト全体を書き直すつもりはありませんが、問題をどこに見ているかを一度に見てみるべきだとコメントしました。しかし、私はあなたの他のものをコメントアウトしてあなたのために働いているあなたの試合のパスワードを取得しました。今のところこれを試してみてください。次に、コメントが1行ずつ削除され、再度作業が停止されます。これはあなたのスクリプトで他のエラーを見つける方法を教えてくれるでしょう。

<script> 
    function checkPass(){ 
     var passValue = document.getElementById('pass').value; 
     var c_passValue = document.getElementById('c_pass').value; 
     var c_passID = document.getElementById('c_pass'); 
     var message = document.getElementById('confirmMessage'); 
     var goodColor = "#66cc66"; 
     var badColor = "#ff6666"; 


     if(passValue == c_passValue) { 

      c_passID.style.backgroundColor = goodColor; 
      message.style.color = goodColor; 
      message.innerHTML = "Passwords Match!"; 

     } else { 

      c_passID.style.backgroundColor = badColor; 
      message.style.color = badColor; 
      message.innerHTML = "Passwords Do Not Match!"; 

     } 

    } 

</script> 

問題は、ID自体ではなくc_passの値の色を変更しようとしていたことでした。私はなぜそれが壊れていたのか理解するのを助けるために変数名を変更しました。ここでも、これはcheckPass関数の場合のみです。他のすべてのものをコメントアウトしてこのスクリプトを使用すれば、checkPass関数を分離して動作することがわかります。私はこれが役立つことを願っています

+0

ああありがとうWojo今私はこの試みをしようとしています –

+0

スクリプトを解読して、何がスクリプトを中断させているかを理解するのを助けるために、スクリプト/回答を再編集しました。もしあなたがこれを働かせることができれば、もっと助けが必要なのかどうか私に教えてください。 – Wojo

+0

こんにちは、何も今は動作していません!以前のコメントでパスワードがありました! –

0

は、あなたが検証()関数を書くたびに、あなたはそれの前のインスタンスを上書きしています。

同じ関数名を3回使用する代わりに、それぞれ異なる目的の2つの異なる関数 - matches()とrequired()を記述することをお勧めします。

matches(field1, field2){ 
    return field1 == field2; 
} 

required(field){ 
    return field != false; 
} 

その後、あなたはにそれらの機能を使用すると、検証している様々な分野をを渡すことができます。

+0

こんにちはアーロン私はそれを行う方法を理解していない!私はこれに1つのレッスンしかありませんでした!上記を置く場所の例を私に教えてください! –

1

ここでは物事のカップル...

tabletrtdを取り除きます。 formを開いて閉じます。 formのすべてのinputフィールドを追加します。

次に、すべてvalidateと呼ばれる3つの関数を追加しないでください。あなたはどちらを呼ぶと思われますか? はむしろ代わりに==!=

function validateFname()

function validateSname()

function validateUname()

その後、

使用===!===にそれらを変更します。

JavaScriptとHTMLの消去を開始すると、より意味をなさされると思います。

Chromeのデバッガなどを使用してコードをデバッグしようとしましたか?

+0

こんにちはこれは宿題で、私たちはテーブルに入れるように頼まれました! –

関連する問題