2017-07-20 12 views
-3

私はjavascriptを初めて使っています。私はこのコードを書いた、フォームはうまくいきます。しかし、スクリプトの部分がうまくいかず、コードに何が間違っているのかを知ることができ、必要な調整ができるようにプログラムを動作させる方法を教えてください。私はこのコードを書いて、フォームが表示されています。しかし、スクリプトの部分が動作していない、誰もそれが間違っていることを見つけることができますか?

function validateform() { 
 
    var f = document.forms["myForm"]["fname"].value; 
 
    var l = document.forms["myForm"]["lname"].value; 
 
    var u = document.forms["myForm"]["uname"].value; 
 
    var p = document.forms["myForm"]["password"].value.length; 
 
    var a = document.forms["myForm"]["age"].value; 
 
    var g = document.forms["myForm"]["gender"].value; 
 
    var m = document.forms["myForm"]["mobile"].value.length; 
 
    var e = document.forms["myForm"]["email"].value; 
 

 
    if (f == "" || f == null) { 
 
    document.getElementsByTagName("fname").innerHTML = "Please Enter your First Name "; 
 
    status = false; 
 
    } 
 
    if (l == "" || l == null) { 
 
    document.getElementsByTagName("lname").innerHTML = "Please Enter your Last Name "; 
 
    status = false; 
 
    } 
 
    if (u == "" || u == null) { 
 
    document.getElementsByTagName("uname").innerHTML = "Please Choose a Username "; 
 
    status = false; 
 
    } 
 
    if (p < 6) { 
 
    document.getElementsByTagName("password").innerHTML = "Password must be atleast 6 characters "; 
 
    status = false; 
 
    } 
 
    if (a == "" || a == null) { 
 
    document.getElementsByTagName("age").innerHTML = "Please Enter your age"; 
 
    status = false; 
 
    } 
 
    if (g == "" || g == null) { 
 
    document.getElementsByTagName("gender").innerHTML = "Please select your gender"; 
 
    status = false; 
 
    } 
 
    if (m < 10 || m > 10) { 
 
    document.getElementsByTagName("mobile").innerHTML = "Please Enter a valid Mobile Number"; 
 
    status = false; 
 
    } 
 
    if (e == "" || e == null) { 
 
    document.getElementsByTagName("email").innerHTML = "Please Enter a valid email address"; 
 
    status = false; 
 
} 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 

 
    <form name="myForm" method="post" action="/action_page_post.php" onsubmit="validateform()"> 
 
    <fieldset> 
 
     <legend> 
 
     <h4>Registration Form</h4> 
 
     </legend> 
 
     <table> 
 
     <tr> 
 
      <td>First Name:</td> 
 
      <td><input type="text" name="fname" /></tr> 
 
     </td> 
 
     <tr> 
 
      <td>Last Name:</td> 
 
      <td><input type="text" name="lname" /></tr> 
 
     </td> 
 
     <tr> 
 
      <td>Username:</td> 
 
      <td><input type="userid" name="uname" /></tr> 
 
     </td> 
 

 
     <tr> 
 
      <td>Password:</td> 
 
      <td><input type="password" name="password" minlength="6" /></tr> 
 
     </td> 
 
     <tr> 
 
      <td>Age:</td> 
 
      <td><input type="number" name="age" /></tr> 
 
     </td> 
 
     <tr> 
 
      <td>Gender:</td> 
 
      <td><input list="genders" name="gender" /></tr> 
 
     </td> 
 
     <datalist id="genders"> 
 
    <option value = "Male"> 
 
    <option value = "Female"> 
 
    <option value = "Other"> 
 
    </datalist> 
 
     <tr> 
 
      <td>Mobile:</td> 
 
      <td><input type="number" name="mobile" minlength="10" /></tr> 
 
     </td> 
 
     <tr> 
 
      <td>E-mail:</td> 
 
      <td><input type="email" name="email" /></tr> 
 
     </td> 
 
     <tr> 
 
      <td colspan="2"><input type="submit" value="Submit" /> </td> 
 
     </tr> 
 
    </fieldset> 
 
    </table> 
 
    </form> 
 
</body> 
 

 
</html>

+0

を:あなたはあなたの条件に応じて変更することができ、怒鳴る更新されたコードを参照してください?定義してください – Weedoze

+0

どのバージョンのhtmlを使用していますか? –

+0

最初の間違いは、 'getElementByTagName'は関数ではありません。その 'getElementsByTagName'です。第二に、それはのNodeListを返しますので、あなたが行うことはできません 'getElementsByTagNameの()。innerHTML' – Rajesh

答えて

0

私が見られるように、多くの基本的な間違いがありました。構文に問題があります。 「getElementByTagName」ではなく「getElementById」を使用します。また、 "status"ではなく "return"キーワードを使用してください。 **動作しない**

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script> 
 
    function validateform() { 
 
\t var status = true; 
 
    var f = document.forms["myForm"]["fname"]; 
 
    var l = document.forms["myForm"]["lname"]; 
 
    var u = document.forms["myForm"]["uname"]; 
 
    var p = document.forms["myForm"]["password"]; 
 
    var a = document.forms["myForm"]["age"]; 
 
    var g = document.forms["myForm"]["gender"]; 
 
    var m = document.forms["myForm"]["mobile"]; 
 
    var e = document.forms["myForm"]["email"]; 
 

 
    if (f.value == "") { 
 
\t \t f.style.background = 'Red';  
 
\t \t document.getElementById("fname-error").innerHTML = "Please Enter your First Name"; 
 
\t \t status = false; 
 
    } 
 
    if (l.value == "") { 
 
\t \t l.style.background = 'Red'; 
 
\t \t document.getElementById("lname-error").innerHTML = "Please Enter your Last Name"; 
 
\t \t status = false; 
 
    } 
 
    if (u.value == "") { 
 
\t \t u.style.background = 'Red'; 
 
\t \t document.getElementById("uname-error").innerHTML = "Please Choose a Username"; 
 
\t \t status = false; 
 
    } 
 
    if (p.value.length < 6) { 
 
\t \t p.style.background = 'Red'; 
 
\t \t document.getElementById("password-error").innerHTML = "Password must be atleast 6 characters"; 
 
\t \t status = false; 
 
    } 
 
    if (a.value == "") { 
 
\t \t a.style.background = 'Red'; 
 
\t \t document.getElementById("age-error").innerHTML = "Please Enter your age"; 
 
\t \t status = false; 
 
    } 
 
    if (g.value == "") { 
 
\t \t g.style.background = 'Red'; 
 
\t \t document.getElementById("gender-error").innerHTML = "Please select your gender"; 
 
\t \t status = false; 
 
    } 
 
    if (m.value.length < 10) { 
 
\t \t m.style.background = 'Red'; 
 
\t \t document.getElementById("mobile-error").innerHTML = "Please Enter a valid Mobile Number"; 
 
\t \t status = false; 
 
    } 
 
    if (e.value == "") { 
 
\t \t e.style.background = 'Red'; 
 
\t \t document.getElementById("email-error").innerHTML = "Please Enter a valid email address"; 
 
\t \t status = false; 
 
    } 
 
\t 
 
\t return status; 
 
    } 
 
</script> 
 
</head> 
 
<body> 
 

 
<form name = "myForm" method = "post" action = "/action_page_post.php" onsubmit = "return validateform()"> 
 
\t <fieldset> 
 
\t <legend> 
 
\t \t <h4>Registration Form</h4> 
 
\t </legend> 
 
\t <table> 
 
\t \t <tr> 
 
\t \t \t <td>First Name:</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type = "text" name= "fname"/> 
 
\t \t \t \t <div id = "fname-error" class = "error"></div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Last Name:</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type = "text" name = "lname"/> 
 
\t \t \t \t <div id = "lname-error" class = "error"></div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Username:</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type = "userid" name = "uname"/> 
 
\t \t \t \t <div id = "uname-error" class = "error"></div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Password:</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type = "password" name = "password" minlength = "6"/> 
 
\t \t \t \t <div id = "password-error" class = "error"></div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Age:</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type= "number" name = "age"/> 
 
\t \t \t \t <div id = "age-error" class = "error"></div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Gender:</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input list = "genders" name = "gender"/> 
 
\t \t \t \t <datalist id = "genders"> 
 
\t \t \t \t \t <option value = "Male"> 
 
\t \t \t \t \t <option value = "Female"> 
 
\t \t \t \t \t <option value = "Other"> 
 
\t \t \t \t </datalist> 
 
\t \t \t \t 
 
\t \t \t \t <div id = "gender-error" class = "error"></div> 
 
\t \t \t </td> 
 
\t \t </tr> \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Mobile:</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="number" name="mobile" minlength = "10"/> 
 
\t \t \t \t <div id = "mobile-error" class = "error"></div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>E-mail:</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="email" name="email"/> 
 
\t \t \t \t <div id = "email-error" class = "error"></div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td colspan="2"> 
 
\t \t \t \t <input type="submit" value="Submit"/> 
 
\t \t \t </td> 
 
\t \t </tr> \t 
 
\t </table> 
 
\t </fieldset> 
 
</form> 
 
</body> 
 
</html>

+0

を使用してみてください。 'getElementsByTagName'はhtmlタグ(' div'、 'li'など)のノードリストを返します。 'getElementsByName'を使用してください – bowl0stu

+0

申し訳ありませんが、私はそれを書いています。「getElementById」と読んでください。コードで私は同じ –

+0

を使用していますが、あなたの入力はIDの名前ではありません。 – bowl0stu

関連する問題