Javascriptがデータを渡すのを止めるフォーム

Question

私のjavascriptの問題を解決しました。申し訳ありませんが主に私のせいで、私のコードをコピーして貼り付けたのですが、コードをもう一度書き直すのではありません。奇妙なことは、SQL文をエコーバックしたので、フォームからプロセスページに変数を渡すようには見えないということです。このフォームは以前私が追加したすべてのJava ScriptにはPost Codeが追加されていました。各行ごとに、またJavaScriptを削除してもまだ動作しません： 明日締め切りとなりました。

<script type="text/javascript"> 
      function checkForm() 
      { 
       var username = document.getElementById('username').value; 
       if(username.length < 5) 
       { 
        alert("Username is to short"); 
        return false; 
       } 
       else if (username.length<16) 
       { 
        alert("Username is to long"); 
        return false; 
       } 

       var firstName = document.getElementById('firstName').value; 
       if(firstName.length <3) 
       { 
        alert("Forname is to short"); 
        return false; 
       } 

       var lastName = document.getElementById('lastName').value; 
       if (lastName.length <3) 
       { 
        alert("Surname is to short"); 
        return false; 
       } 

       var address = document.getElementById('address').value; 
       if (address.length <8) 
       { 
        alert("Address is to short"); 
        return false; 
       } 

       var town = document.getElementById('town').value; 
       if (town.length <3) 
       { 
        alert ("Town is to short"); 
        return false; 
       } 

       var postCode = document.getElementById('postCode').value; 
       if (postCode.length <6) 
       { 
        alert ("Invalid Post Code"); 
        return false; 
       } 
       else if (postCode.length>8) 
       { 
        alert("Invalid Post Code"); 
        return false; 
       } 


       var cardType = document.getElementById('cardType').value; 
       if (cardType.length <3) 
       { 
        alert ("Please enter a valid card type"); 
        return false; 
       } 

       var password = document.getElementById('password').value; 
       if (password.length <6) 
       { 
        alert ("You password must be between 6-12 characters"); 
        return false; 
       } 
       else if(password.length>12) 
       { 
        alert ("Your password must be between 6-12 characters"); 
        return false; 
       } 
       else 
       { 
        return true; 
       } 


      } 

      function checkUsername() 
      { 
       var username = document.getElementById('username').value; 
       var element = document.getElementById('username1'); 
       if(username.length < 5) 
       { 
        element.innerHTML = "Username is to short"; 
        element.style.color = "red"; 
       } 
       else if (username.length >16) 
       { 
        element.innerHTML = "Username is to long"; 
        element.style.color = "red"; 
       } 
       else 
       { 
        element.innerHTML = "Username"; 
        element.style.color = "green"; 
       } 
      } 
      function checkFname() 
      { 
       var firstName = document.getElementById('firstName').value; 
       var element = document.getElementById('firstname1'); 
       if(firstName.length < 3) 
       { 
        element.innerHTML = "Forname is to short"; 
        element.style.color = "red"; 
       } 
       else 
       { 
        element.innerHTML = "Forname"; 
        element.style.color = "green"; 
       } 
      } 
      function checkLname() 
      { 
       var lastName = document.getElementById('lastName').value; 
       var element = document.getElementById('surname1'); 
       if(lastName.length < 3) 
       { 
        element.innerHTML = "Surname is to short"; 
        element.style.color = "red"; 
       } 
       else 
       { 
        element.innerHTML = "Surname"; 
        element.style.color = "green"; 
       } 
      } 
      function checkAddress() 
      { 
       var address = document.getElementById('address').value; 
       var element = document.getElementById('address1'); 
       if(address.length < 8) 
       { 
        element.innerHTML = "Address is to short"; 
        element.style.color = "red"; 
       } 
       else 
       { 
        element.innerHTML = "Address"; 
        element.style.color = "green"; 
       } 
      } 
      function checkTown() 
      { 
       var town = document.getElementById('town').value; 
       var element = document.getElementById('town1'); 
       if(town.length < 3) 
       { 
        element.innerHTML = "Town is to short"; 
        element.style.color = "red"; 
       } 
       else 
       { 
        element.innerHTML = "Town"; 
        element.style.color = "green"; 
       } 
      } 
      function checkPostCode() 
      { 
       var postCode = document.getElementById('postCode').value; 
       var element = document.getElementById('postcode1'); 
       if(postCode.length < 6) 
       { 
        element.innerHTML = "Post code is to short"; 
        element.style.color = "red"; 
       } 
       else if (postCode.length>8) 
       { 
        element.innerHTML = "Post Code To Long"; 
        element.style.color = "red"; 
       } 
       else 
       { 
        element.innerHTML = "Post Code"; 
        element.style.color = "green"; 
       } 
      } 

       function checkCard() 
       { 
        var cardType = document.getElementById('cardType').value; 
        var element = document.getElementById('card1'); 
        if(cardType.length < 3) 
        { 
         element.innerHTML = "Card is to short"; 
         element.style.color = "red"; 
        } 
        else 
        { 
        element.innerHTML = "Card Type"; 
        element.style.color = "green"; 
        } 
       } 
       function checkPassword() 
      { 
       var password = document.getElementById('password').value; 
       var element = document.getElementById('password1'); 
       if(password.length < 6) 
       { 
        element.innerHTML = "Password is to short"; 
        element.style.color = "red"; 
       } 
       else if (password.length>16) 
       { 
        element.innerHTML = "Password is to long"; 
        element.style.color = "red"; 
       } 
       else 
       { 
        element.innerHTML = "Password"; 
        element.style.color = "green"; 
       } 
      } 

</script> 


    <p><b><h3>Welcome User Please Register</h3></b></p> 
    <form action="registerUserProcess.php" id="registerUserForm" method="post" name="registerUserForm" > 

    <table> 
    <tr><td><label id="username1">Username:</label></td><td><input id="username" type="text" size="16" onBlur='checkUsername();'/></td></tr> 
    <tr><td><label id="firstname1">Forename:</label></td><td><input id="firstName" type="text" size="20" onBlur="checkFname();" /></td></tr> 
    <tr><td><label id="surname1">Surname:</label></td><td><input id="lastName" type="text" size="30" onBlur="checkLname();" /></td></tr> 
    <tr><td><label id="address1">Address:</label></td><td><input id="address" type="text" size="50" onBlur="checkAddress();" /></td></tr> 
    <tr><td></td><td><input id="address2" type="text" size="50" onBlur="" /></td></tr> 
    <tr><td><label id="town1">Town:</label></td><td><input id="town" type="text" size="50" onBlur="checkTown();" /></td></tr> 
    <tr><td><label id="postcode1">Post Code:</label></td><td> <input type="text" id="postCode" size="8" onBlur="checkPostCode();" /></td></tr> 
    <tr><td><label id="contact1">Contact No:</label></td><td> <input type="number" id="contact" size="12" onBlur="checkContactNo();" /></td></tr> 
    <tr><td>Card Number:</td><td><input type="number" id="cardNo1" size="4" /> - <input type="number" id="cardNo2" size="4" /> - <input type="number" id="cardNo3" size="4" /> - <input type="number" id="cardNo4" size="4" /></td></tr> 
    <tr><td><label id="card1">Card Type</label></td><td> <input type="text" id="cardType" size="8" onBlur="checkCard();" /></td></tr> 
    <tr><td>Email Address:</td><td><input id="emailAddress" type="text" size="50" /></td></tr> 
    <tr><td><label id="password1">Password:</label></td><td><input id="password" type="password" size="16" onBlur="checkPassword();" /></td></tr> 
    <tr><td><label id="terms1">Accept Terms & Conditions:</label></td><td><input type="checkbox" id="termsConditions" value="yes" onBlur="checkTerms();" /></td></tr> 
    <tr><td><input type="reset" id="resetForm" value="Reset" id="resetForm" /></td><td><input type="submit" id="submitUser" value="Submit" id="submitUser" onSubmit='return checkForm();' /></td></tr> 
    </table> 
</form> 

Answer 1

その他の人からは、構文を確認してください。 checkform()では、それは

else if (username.length > 16)) instead of < 16 

であるべきとcheckUsername()に間違った長さを綴りました。

しかし、あなたの主な問題はあなたの返品にあります。 checkform()では、すべてが検証されたときに最後にreturn trueを置く必要があります。そうしないと、関数は最初の検証後に終了します。

また、このすべてをリファクタリングすることもできます。あなたは、ほぼ同じことをするたくさんの機能を持っています。最小文字、最大文字、コントロールでパラメータを検証する関数を1つ作成すると、すべてのコードを20〜30行で処理できます。

また、変数の名前や対象となるコントロールを変更せずに、一部の関数をコピーして貼り付けたようです。実際には、すべての関数で変数としてUsernameを割り当てますが、条件内の名前を変更します。つまり、割り当て解除する変数を使用します。

Answer 2

機能：checkForm（）：

あなたがする場合は、他の二を変更する必要があります。

else if (username.length<16)) needs to be > 16. 

-

機能：checkUsername（）：

長さの綴りが間違っています。

else if (username.length>16) 

Answer 3

これは一つの質問のためにあまりにも多くのコードですが、私は最初の関数にいくつかのことを気づいた：

else if (username.length<16) // This should probably be username.length > 16 
{ 
    alert("Username is to long"); 
    return false; 
} 

if (isNAN(contact)) // this should probably be !isNaN(contact) 
{ 
    return true; 
} 

Answer 4

あなたは以下でスペルミスの長さ：username.lenght>16

に変更しますこれはあなたの長すぎるが働いていない理由です。

 function checkUsername() 
     { 
      var username = document.getElementById('username').value; 
      var element = document.getElementById('username1'); 
      if(username.length < 5) 
      { 
       element.innerHTML = "Username is to short"; 
       element.style.color = "red"; 
      } 
      else if (username.lenght>16) 
      { 
       element.innerHTML = "Username is to long"; 
       element.style.color = "red"; 
      } 
      else 
      { 
       element.style.color = "green"; 
      } 
     }